javascript - this.setState({array}) 中发生了什么？

Question

this.setState({array}) 行是否替换了 this.state 中的数组 obj...？

class myComp extends Component {

    constructor(props){
        super(props);

        this.state = {
            array: [],
            mouseIsPressed: false
        };
    }

    componentDidMount() {     
        const array = getInitialArray();
        this.setState({array});
      }

      render() {
          return(
          );
      }
}

当我在该行之后控制台日志记录时， this.state 与该行之前的状态相同。

此外，该行通常像这样使用。setState({abc: abc});那条线有何不同？

Answer 1

the line this.setState({array}) is it replacing the array obj in this.state...?

是的。

{ array } 是 { array: array } 的简写。当您调用 setState 并向其传递一个对象时，React 将更新该对象中列出的每个属性，并保持所有其他属性不变。因此在这种情况下 array 将被更新，但 mouseIsPressed 不会。

When I console log rite after that line this.state is the same as before that line.

setState 是异步的(至少有时)。 setState 之后的日志语句不保证看到新值。 setState 的目的是使组件重新渲染，并且在新的渲染上它将具有新值。您可以将 console.log 粘贴到渲染中以验证它是否正在重新渲染并且具有新数据。

很少需要它，但 setState 确实允许您将函数作为第二个参数传递给它。 setState 完成后将运行此函数:

this.setState({ array }, () => {
  console.log('all done!', this.state)
})