Я пытаюсь отобразить имена на экране, используя REST API "Rick and Morty", но буквально ничего не отображается, и мое состояние не обновляется.

Question

Я использую API "Rick and Morty Rest API", он основан на действительно популярном телешоу, я пытаюсь отобразить имена персонажей на экране, но ничего не появляется.

Мой код для App.js ниже:

    state = {
    url: "https://rickandmortyapi.com/api/character",
    character: null
  };

  async componentDidMount() {
    const res = await axios.get(this.state.url);
    this.setState({
      character: res.data.results.forEach(function(element) {
        return element.name;
      })
    });
  }

  render() {
    return (
      <div>
           <h1>{this.state.character}</h1>
      </div>
    );
  }
}

export default App;

Что я пытался сделать:

1. Я установил свое "состояние" на два параметра, называемых URLи символ.

2. Используя setState, я пытаюсь обновить символ моего состояния на name (у меня есть список имен, поэтому я использовал forEach)

3. Наконец, в теге "h1" я пытаюсь отобразить символ ОБНОВЛЕННОГО СОСТОЯНИЯ

4. Я не получаю сообщение об ошибке и абсолютно отображаюсь на моем экране.

Я отправил все как есть на свой github для получения дополнительной справки: https://github.com/abhinav-anshul/Rick-and-Morty-Database

Ссылка API, которую я использую: https://rickandmortyapi.com/

Answer 1

Определите переменную состояния character как массив:

  state = {
    url: "https://rickandmortyapi.com/api/character",
    character: []
  };

Вместо использования forEach сохраните результаты в своем состоянии.

this.setState({
          character: res.data.results
    });  

Затем сопоставьтерезультаты внутри рендера, как это:

{this.state.character.map(character => {
       return(
         <h1>{character.name}</h1>
       )
   })}

Answer 2

Вам не нужно перебирать каждый элемент при установке состояния, поэтому вы не можете ничего визуализировать, так как ваше состояние все еще не определено в конце цикла. Всегда используйте альтернативы в таких сценариях, такие как операторы распространения или конкатенации. В вашем случае это может выглядеть так:

this.setState({
character: res.data.results
})

После этого выполните итерацию массива символов с помощью любого вспомогательного метода (map, forEach и т. Д.). Не обязательно присваивать свой символ пустому массиву в вашем состоянии, но всегда полезно делать в состоянии переменную / массив / объект того же типа, который вы ожидаете использовать позже в своем коде. На данный момент ваш character: null также будет работать нормально.