Реагируйте на JS - мне трудно получить информацию JSON из API в окне выбора в моем проекте

Question

Я новичок в React и JSON, поэтому у меня возникли проблемы с получением информации JSON и размещением ее в теге Option внутри Select в моем проекте.Что я делаю не так?

Вот мой код:

    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}`
    }));
  })

РЕДАКТИРОВАТЬ:

Также, пожалуйста, не вызывайте свой API из componentWillMount метода.Хотя ваш код может работать, этот метод жизненного цикла уже помечен как UNSAFE и его следует избегать.Вместо этого позвоните по вашему запросу на componentDidMount.Инициализируйте состояние по умолчанию для вашего Компонента, например:

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

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

и добавьте проверку на «нулевое» состояние для вашего render() метода следующим образом:

<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>

EDIT 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>
  );
}