javascript - For 循环在 ComponentDidMount 中遍历一个不工作的对象

Question

我有一个名为 notes 的 Prop ，它是一个多层对象(如 json)并且来自某个父对象。当我尝试在 ComponentDidMount 中遍历它时，它似乎没有进入 for 循环，因为控制台日志没有输出任何内容。有什么我想念的吗？

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 属性作为默认属性包括在内，以了解它的结构。实际上，它来自它的父级。但是那里没有问题。我检查了一下，我收到了正确的 Prop 。

Answer 1

你不应该像 this.props.notes 一样多次设置状态，通过查看你的代码，你甚至不需要 for 循环，你可以实现相同的结果做了类似的事情:

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