Получение и массив объектов из базы данных и отображение их с помощью react

Question

Я пытался получить массив объектов, когда столкнулся с этой проблемой. Извините за мой беспорядочный код, я новичок.

export class App extends Component {
  state ={
    character:[]
  }
  componentDidMount(){

     fetch('https://swapi.dev/api/people/').then(data => data.json()).then(res =>{
     this.setState(() =>{
       const ar = res.results

       return {
         character: ar
       }
     })
    })


  }
  render() {
    return (
      <div>
         test

          {console.log(this.state.character[0])}
      </div>
    )
  }
}

Этот код сначала у меня работает нормально, пока я не изменил журнал консоли на {console.log(this.state.character[0].name)}, он говорит, что «не может прочитать свойство неопределенного» даже хотя первая строка отображает объект идеально

Answer 1

Ваш App компонент извлекает данные в методе жизненного цикла componentDidMount, который будет выполняться после первого монтирования. {console.log(this.state.character[0].name)} показывает ошибку «невозможно прочитать свойство undefined, потому что при первом монтировании компонента данные еще недоступны, а это означает, что this.state.character все еще пустой массив. Поэтому при попытке доступа к this.state.character[0].name его например, дайте мне значение undefined.name, что даст вам ошибку, потому что свойство name не существует на undefined. Чтобы исправить эту проблему, вы можете проверить, есть ли character.length в условном выражении, а затем попытаться получить доступ к .name.

Пример

render() {
    return (
      <div>
         test

          {this.state.character.length && <p>{this.state.character[0].name}</p>}
      </div>
    )
  }

Answer 2

Fetch - это asynchronous, поэтому вам потребуется некоторое время, чтобы получить результат, но до этого ваш jsx уже вызван. Так что хорошо использовать условный jsx. Пожалуйста, проверьте полный пример , как показано ниже, где я показал все имя символьного массива под элементом li.

export class App extends React.Component {
    state = {
        character: []
    };

    componentDidMount() {

        fetch('https://swapi.dev/api/people/').then(data => data.json()).then(res => {
            this.setState(() => {
                const ar = res.results;

                return {
                    character: ar
                }
            })
        })
    }

    render() {
        return (
            <div>
                test
                {
                    this.state.character && this.state.character.length && this.state.character.map((item, index) => {
                       return <li key={index}>{item.name}</li>
                    })
                }
            </div>
        )
    }
}

export default App;

Answer 3

Так что работать не будет. Данных пока нет. Есть несколько способов обойти это. Самый простой - это предопределить структуру объекта в объекте состояния, что не очень динамично c. В противном случае простое .length + if + else выполнит работу.