为啥状态对象的名称不需要与setState中的名称匹配？

Posted 2023-02-22

【中文标题】为啥状态对象的名称不需要与setState中的名称匹配？

【英文标题】：Why does the name of the state object not need to match the name in setState?为什么状态对象的名称不需要与setState中的名称匹配？

【发布时间】：2018-07-05 10:20:25

【问题描述】：

在下面的代码中，您会看到我异想天开地将 this.state 对象命名为“gladys”。在 handleSubmit 函数中，const 结果返回了一个值，但我在这里将对象的名称设置为更符合逻辑的“错误消息”。为什么这行得通？为什么 this.state 中定义了初始状态的对象的名称不必与 this.setState 更新的对象的名称匹配？ （以防万一，handleAddOption 对 optionfield 值运行验证，如果 newoption 等于空字符串或已经存在，则返回错误消息。）

class AddOption extends React.Component 
constructor(props)
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = 
        gladys: undefined
    

handleSubmit(e) 
    e.preventDefault();
    const newoption = e.target.elements.optionfield.value.trim();
    const result = this.props.handleAddOptions(newoption);
    e.target.elements.optionfield.value = '';

    this.setState((prevState) => ( 
        errormessage: result
    ));

render () 
    return (
        <div>
        this.state.errormessage && <p>this.state.errormessage</p>
        <form onSubmit=this.handleSubmit>
        <input type='text' name='optionfield'/>
        <button>Add an Option</button>
        </form>
        </div>
    );

【参考方案1】：

因为它起作用了

this.state = 
    gladys: undefined

还有这个

this.state = 
    gladys: undefined,
    errormessage: undefined

在 javascript 中是相等的。

所以当你这样做时

this.setState( errormessage: result )

React 只是替换

errormessage: undefined

与

errormessage: result

---

您还应该注意，gladys 不是状态的名称，而是状态的属性。

一个组件的状态可以包含多个属性，例如gladys 和errormessage。

【讨论】：

谢谢，GG。这有帮助。

【参考方案2】：

这是可能的，因为setState 将返回的对象与状态对象浅合并，这种行为允许对状态进行部分更新，例如您的示例中的那个。

// Let's say that the current state looks like this
this.state =  someProp: 'someValue', anotherProp: 'anotherValue' ;

// Calling set state like this
this.setState((prevState) => ( 
    errormessage: 'result'
));

// Means that you are merging the prevState, shown above, into a new
// State object wich will contain the errormessage prop
this.state =  
    someProp: 'someValue', 
    anotherProp: 'anotherValue',
    errormessage: 'result',
;

这里是关于setStateofficial documentation的链接

【讨论】：

TY，朱利安。现在我明白了。干杯！