Перебор массива внутри объекта в JSX дает неопределенный

Question

Я получаю данные из моего API:

  fetch('/api/p/' + project_id).then(res => res.json())
            .then((project) => {
                console.log(project)
                this.setState({ project })
            }
            );

структура проекта выглядит следующим образом:

{
 name: "project1",
comments: ["com1", "com2"]
}

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

this.state.project.comments.map((comment) => {
           return (
               <p><i class="fas fa-chevron-right"></i> { comment } </p>
          );
 });

Я получаю эту ошибку:

TypeError: Cannot read property 'map' of undefined

Я пробовал map или forEach и для. а также я не могу получить его длину, потому что я получаю ту же ошибку.

, но если я наберу this.state.project.comments, я получу все элементы в одной строке без пробела, как этот comment1comment2comment3

Answer 1

Вы пытаетесь .map получить значение, равное undefined. Возможно, это связано с тем, что this.state.project.comments не определено, пока вы fetch используете, но React все еще пытается выполнить начальный рендеринг.

Убедитесь, что вы установили начальное состояние где-то, например

constructor() {
  super();

  this.state = { project: { comments: [] } };
}

Кроме того, вы можете указать значение по умолчанию прямо здесь, когда вы звоните .map:

(this.state.project.comments || []).map((comment) => {

Answer 2

Я думаю, что вы неправильно отображаете эту строку: this.state.comments.map((comment) => { должно быть this.state.project.comments.map((comment) => {

Answer 3

То, что я вижу из вашего кода, это то, что вы отображаете «комментарии», но вы обновляете проект, и вам тоже должны нравиться

this.setState({
  project: res.data
})

и для отображения данных

this.state.project.map((project)=>{
   return (
               <p><i class="fas fa-chevron-right"></i> { project.comments } </p>
          );
})