Question

我正在尝试设置我的PlayerKey组件的状态，但状态不会在onClick操作上更新：

class PlayerKey extends Component { 
    constructor(props) {
        super(props);
        this.state = {
            activeKeys:[]
        }
    }

    activateKey = (e) => {
        this.setState({
            activeKeys:["2","3"]
        })
    }

    render() {
        return (
            <div className="key" data-row-number={this.props.rowKey} data-key-number={this.props.dataKeyNumber} onClick={this.activateKey}></div>
        )
    }
}

我已经尝试在activateKey中记录this.state的控制台，它给了我组件状态没问题（空白数组）所以不确定为什么我不能更新它？

Answer 1

react中的

setState方法是异步的，并且不会立即反映更新的状态值。

React可以将多个setState（）调用批处理为单个更新以提高性能。

因此，访问最近设置的状态值可能会返回旧值。要查看状态是否确实已设置，您实际上可以在setState中将函数作为回调传递，并查看更新的状态值。 React Docs

与您的情况一样，您可以将函数作为回调传递，如下所示。

activateKey = (e) => {
    this.setState({
        activeKeys:["2","3"]
    }, () => {
        console.log(this.state.activeKeys); // This is guaranteed to return the updated state. 
    });
}

看到这个小提琴：JSFiddle

无法将StateState设置为React组件

1 个答案: