Question

我有一个名为notes的道具，它是一个多层对象（如json）并来自某个父级。当我尝试在ComponentDidMount中迭代它时，它似乎没有进入for循环，因为控制台日志没有输出任何东西。我失踪了什么？

＆＃13;

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>
    )
  }
}

＆＃13;

注意：在这里，我将包括音符道具作为默认道具，以便了解它的结构。实际上，它来自它的父母。但那里没有问题。我查了一下，我收到了正确的道具。

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循环，因为this.props.notes为空。组件NotesList尚未收到道具，因为子级的ComponentDidMount在父级ComponentDidMount之前运行。来到NotesList的道具是在父母ComponentDidMount内获取的，这是我应该提到的。

For ComponentDidMount中的循环迭代通过不起作用的对象

3 个答案: