• 给setState传入回调函数
    • 问题
    • 解决办法
    • 举一反三
  • 参考资料:

    给setState传入回调函数

    在async-nature-of-setState中我们已经提到过, setState其实是异步的. 因为出于性能优化考虑, React会将多次setState做一次批处理. 于是setState并不会在被调用之后立即改变我们的state.
    这就意味着你并不能依赖于在调用setState方法之后state, 因为此时你并不能确认该state更新与否.
    当然针对这个问题我们也有解决办法—用前一个state(previous state)作为需要传入函数的参数,将一个函数作为第二个参数传递给setState. 这样做能保证你传入的函数需要取到的state一定会是被传入的setState执行之后的state.

    问题

    1. // assuming this.state.count === 0
    2. this.setState({count: this.state.count + 1});
    3. this.setState({count: this.state.count + 1});
    4. this.setState({count: this.state.count + 1});
    5. // this.state.count === 1, not 3

    解决办法

    1. this.setState((prevState, props) => ({
    2.   count: prevState.count + props.increment
    3. }));

    举一反三

    1. // Passing object
    2. this.setState({ expanded: !this.state.expanded });
    4. // Passing function
    5. this.setState(prevState => ({ expanded: !prevState.expanded }));

    参考资料:

    • setState() Gate
    • Do I need to use setState(function) overload in this case?
    • Functional setState is the future of React