React JS - 我很难在我的项目的选择框中从 API 获取 JSON 信息

Question

我是 React 和 JSON 的新手，所以我在获取 JSON 信息并将其放在我项目的 Select 内的 Option 标记上时遇到了一些麻烦。我做错了什么？

这是我的代码：

    componentWillMount() {
        this.fetchData();
      }

      fetchData() {
        fetch("https://grupoprever-api.qap/listas/estados", { mode: "cors" })
          .then(response => response.json())
          .then(parsedJSON => {
            parsedJSON.map(estado => ({
              v: `${estado.key}`,
              d: `${estado.value}`
            }));
          })

          .then(estados =>
            this.setState({
              estados
            })
          )

          .catch(error => console.log("Erro no Fetch:", error));
      }

我正在尝试将这些信息放在这里：

    <div className="meioCampo">
              <span>Estado:</span>
              <select
                id="estadosDropdown"
                onChange={e => this.setState({ escolhidoEstado: e.target.value })}
              >
                {this.state.estados.map(estado => {
                  return (
                    <option key={estado.v} value={estado.v}>
                      {estado.d}
                    </option>
                  );
                })}
              </select>
            </div>

所有这些都在一个组件内。

哦，我的JSON数据是这样的：

{

    "AC":"Acre",
    "AL":"Alagoas",
    "AM":"Amaz\u00f4nia"

}

Answer 1

您没有从 map 函数返回任何数据。

改变

.then(parsedJSON => {
    parsedJSON.map(estado => ({
      v: `${estado.key}`,
      d: `${estado.value}`
    }));
 })

到

.then(parsedJSON => {
    return parsedJSON.map(estado => ({
      v: `${estado.key}`,
      d: `${estado.value}`
    }));
  })

编辑：

另外请不要从componentWillMount 方法调用您的api。虽然您的代码可能正在运行，但此生命周期方法已被标记为 UNSAFE，应避免使用。改为从componentDidMount 调用您的获取请求。初始化组件的默认状态，例如：

constructor(props) {
  super(props);
  ... // your other code in constructor

  this.state = {
     estados: null,
     // add other state variables here...
  }
}

并像这样向您的 render() 方法添加“null”状态检查：

<div className="meioCampo">
  <span>Estado:</span>
  <select
    id="estadosDropdown"
    onChange={e => this.setState({ escolhidoEstado: e.target.value })}         >
      {this.state.estados && this.state.estados.map(estado => {
        return (
          <option key={estado.v} value={estado.v}>
            {estado.d}
          </option>
        );
      })}
 </select>
</div>

编辑 2：

由于您的响应正文是一个对象（不是列表），那么您可以尝试以下代码：

fetchData() {
  fetch("https://grupoprever-api.qap/listas/estados", { mode: "cors" })
    .then(response => response.json())
    .then(estados =>
       this.setState({
          estados
      })
    );

然后使用Object.keys() 方法生成您的选项列表：

render() {
   ....
  const {estados} = this.state;

  return(
    <div className="meioCampo">
      <span>Estado:</span>
      <select
        id="estadosDropdown"
        onChange={e => this.setState({ escolhidoEstado: e.target.value })}         >
          {estados && Object.keys(estados).map(key => {
            return (
              <option key={key} value={key}>
                {estados[key]}
              </option>
            );
          })}
     </select>
    </div>
  );
}