Могу ли я использовать «this.props» в componentDidMount?Ошибка: Uncaught TypeError: Невозможно прочитать свойство 'map' из неопределенного

Question

В componentDidMount к selectTodo присвойте this.props.selected. В консоли я проверяю, что selectTodo - это объект, который содержит массив comments. Я пытаюсь получить доступ к этому массиву, но получаю ошибку: Ошибка:

Uncaught TypeError: Невозможно прочитать свойство 'map' из неопределенного

class Details extends Component {
  constructor() {
    super();


    this.state = {
      resul: []
      selectTodo:[]
    }; 
  }

  componentDidMount() {
    axios.get(" http://....../todos")
      .then(response => {
        this.setState({
          resul: response.data,
          selectTodo: this.props.selected
        });
      })
      .catch(error => {
        console.log('Error fetching and parsing data', Error);
      }
    );
  }


  render () {

    return (
      <div>    
        {
          { 
              this.state.selectTodo.comments.map((obj, i) => {
                return <li>{obj["comment"]}</li>
              })  
            } 
        }
      </div>      
    );
  }
}



export default Details;

console.log

 console.log(this.state.selectTodo);


 return:


Object
  comments: (2) [{'comment': 'sdsd'}, {'comment': 'sdsdsdsds'}]
  id: 1

Ошибка: Uncaught TypeError: Невозможно прочитать свойство 'map' из неопределенного

Answer 1

Во-первых, данные, которые вы определяете в state и цикл в render, выглядят не очень хорошо для меня. Я имею в виду, вы определяете selecTodo как массив в constructor и пытаетесь получить как selectTodo.comments в методе render. Итак, измените состояние на

    this.state = {
      resul: []
      selectTodo:{comments: []}
    };

И измените способ назначения данных в componentDidMount как

  componentDidMount() {
    axios.get(" http://....../todos")
      .then(response => {
        this.setState({
          resul: response.data,
          selectTodo: { comments: this.props.selected.comments }
        });
      })
      .catch(error => {
        console.log('Error fetching and parsing data', Error);
      }
    );
  }

и выполните следующие действия в render

  render () {
    if(!this.state.selectedTodo.comments.length) {
      return null;
    }
    return (
      <div>    
        {
          { 
              this.state.selectTodo.comments.map((obj, i) => {
                return <li>{obj["comment"]}</li>
              })  
            } 
        }
      </div>      
    );
  }

Answer 2

undefined происходит из-за того, что componentDidMount происходит после первого рендеринга, поэтому при первом рендеринге this.state.selectTodo по-прежнему не определено.

Один из способов решения этой проблемы - проверка рендера, существует ли this.state.selectTodo и только если он существует, возвращает div с картой, в противном случае возвращает спиннер или что-то еще.

Имеет ли это смысл?