ComponentDidMount内部的for循环遍历不起作用的对象

Question

我有一个名为notes的道具，它是一个多层对象（如json），来自某个父对象。 当我尝试在ComponentDidMount中对其进行迭代时，由于控制台日志未输出任何内容，因此它似乎没有进入循环。 我有什么想念的吗？

 class NotesList extends React.Component { state = { arr: [] } static defaultProps = { notes: { tier1: { tier2: "some content 1", tier22: "some 2" }, tier11: { tier222: "some content 1", tier2222: "some 2" } } } componentDidMount() { for (var folder in this.props.notes) { console.log(folder); this.state.arr.push(folder); this.setState({ arr: this.state.arr }) } } render() { return ( <div> something </div> ) } } 

注意：在这里，我将notes属性作为默认属性包含在内，以给出有关其结构的想法。 实际上，它来自其父。 但是那没有问题。 我检查了一下，然后收到正确的道具。

Answer 1

您不应该像this.props.notes那样设置状态多次，并且通过查看代码，甚至不需要for循环，您可以通过执行以下操作来达到相同的结果：

  componentDidMount() {
      this.setState((prevState) => ({
        arr: [...prevState.arr, ...this.props.notes]
      }));
  }

Answer 2

道具传递给您的构造函数，您需要在使用前在其中填充this.props。 只需添加...

constructor (props){
     super(props);
     // Any other initialisation you need
}

上你的课

Answer 3

我知道了！

它不在for循环内for因为this.props.notes为空。 该组件NotesList尚未收到道具，但因为ComponentDidMount一个孩子之前运行ComponentDidMount为父。 NotesList中即将使用的道具是在父级的ComponentDidMount内部获取的，我应该提到过。