javascript - 我可以在 componentDidMount 中使用 "this.props"吗？错误:Uncaught TypeError: Cannot read property 'map' of undefined

Question

在 componentDidMount 中为 selectTodo 分配 this.props.selected。在控制台中，我检查 selectTodo 是否是一个包含 comments 数组的对象。我试图访问此数组，但收到错误:错误:

Uncaught TypeError: Can not read property 'map' of undefined

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;

控制台.log

 console.log(this.state.selectTodo);


 return:


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

Error: Uncaught TypeError: Cannot read property 'map' of undefined

Answer 1

首先，您在 state 中定义的数据以及在 render 中循环的数据对我来说看起来不太好。我的意思是，您将 selecTodo 定义为 constructor 中的数组，并尝试在 render 中获取 selectTodo.comments方法。因此，将状态更改为

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