Question

我是React的新手，并且只存储我的组件在组件状态下所需的信息。我遇到了this.setState调用异步性质的问题。

我通过直接使用this.state.stateKey = newValue分配状态值来解决这个问题。请参阅下面的特定简短示例案例，该案例演示了this.setState如何对我不起作用以及直接赋值如何。

import React from 'react';

export default class Test extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        testVal : "Enter new text here"
    }
}
    runTest = (evt) => {
        // if I run the test with the below line, the value
        // in state is not updated before the console.log
        this.setState({testVal: evt.target.value});

        // if I run the test with the below line, the value
        // in state is loaded before the console.log call,
        // and I do get a print of the new value
        this.state.testVal = evt.target.value;

        console.log("testVal: ", this.state.testVal);
    }

    render = () => {
        return(
        <div>
            Test
            <input
                class="form-control"
                type="text"
                defaultValue={this.state.testVal}
                onBlur={this.runTest}
            />
        </div>
        )
    }
}

我的问题是使用this.state.stateKey = newValue直接分配更新状态有什么问题吗？我看到其他解决方法，但没有提到这一点。看起来很简单，一定有问题。感谢。

Answer 1

创建状态的不可变克隆是个好主意，因为比较状态更改的方式是为了优化渲染。

在像shouldComponentUpdate这样的生命周期方法中，传入nextProps并可以与this.props进行比较。

如果直接改变状态，那么 nextProps.someprop和this.props.someprop将始终相同，因此您可能无法获得预期的行为。

React doc也说

不要直接改变this.state，因为之后调用setState（）可能会替换你所做的突变。把this.state看作是不可变的。

React：使用直接值分配更新组件状态 - 任何原因都没有？

1 个答案: