重新渲染后访问状态 - React

Question

我知道当你调用 setState 时，React 不会立即更新 state。在此示例中，我如何访问更新后的状态？

    changeInputHandler(e) {
        let value;
        let name = e.target.name;
        if(e.target.type === "checkbox") {
            value = e.target.checked;
        } else {
            value = e.target.value;
        }
        
        this.setState({
            [name]: value
        });

        //How can i use updated state here?
    }

我知道一种解决方案是使用 setTimeout，但还有其他选择吗？

Answer 1

你处理这个问题的一种方法是你只使用你将设置为新状态的对象，因为你已经在那个范围内拥有它，所以：

changeInputHandler(e) {
    let value;
    let name = e.target.name;
    if(e.target.type === "checkbox") {
        value = e.target.checked;
    } else {
        value = e.target.value;
    }
    
    this.setState({
        [name]: value
    });

    //How can i use updated state here?
}

如果重写为：

changeInputHandler(e) {
        let value;
        let name = e.target.name;
        if(e.target.type === "checkbox") {
            value = e.target.checked;
        } else {
            value = e.target.value;
        }
        
        const newState = {
            ...this.state,
            [name]: value
        };
        
        this.setState(newState);

        //use newState here for whatever you need
    }

假设您可以通过 this.state.

访问当前状态

重新渲染后访问状态 - React

Accessing state after re-rendering - React

state

reactjs