Question

在componentDidMount中，将updateRecords(5439, "artist", "ABBA");分配给ABBA Gold。在控制台中，我检查selectTodo是否是包含ABBA数组的对象。我试图进入此数组，但出现错误：错误：

未捕获的TypeError：无法读取未定义的属性“地图”

selectTodo

Console.log

this.props.selected

错误：未捕获的TypeError：无法读取未定义的属性“地图”

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

未定义来自于componentDidMount发生在第一次渲染之后的事实，因此当第一次渲染发生时this.state.selectTodo仍未定义。

一种解决方法是在渲染器内部检查this.state.selectTodo是否存在，并且只有存在时返回带有地图的div，否则返回微调器或其他东西。

这有意义吗？

我可以在componentDidMount中使用“ this.props”吗？错误：未被捕获的TypeError：无法读取未定义的属性“映射”

2 个答案: