道具不会更新状态值答案

【问题标题】：Props don't update value of state道具不会更新状态值
【发布时间】：2017-02-25 11:50:20
【问题描述】：

我正在将值传递给子组件字段：

<Field key = {field.fieldName} fieldName = {field.fieldName} value = {field.value} 
getModField={this._getModField.bind(this)} />

并且在 Field 状态应该由 props 更新：

constructor(props){
    super(props);

    this.state = {
        value: this.props.value,
        fieldName: this.props.fieldName
    };
}

我更新的值应该显示在另一个字段中：

<div className = "form-group" key = {this.props.fieldName} >
    <input className="col-sm-2 control-label" name={this.props.value}
           defaultValue={this.state.value} onChange={this._handleChange.bind(this)} 
           ref={(input) => this._value = input} />
</div>

但在 Field 的构造函数中，这一行： value: this.props.value, 不更新value。只有 fieldName 的变化会触发 value 的变化

我认为它与key 道具有关。这里有什么问题？

【问题讨论】：

标签： javascript reactjs key

【解决方案1】：

如果我理解正确，您想使用最新的道具更新组件的状态。最好的方法是 componentWillReceiveProps 生命周期方法。您将在此方法中获得 nextProps 作为参数，基于该参数您可以使用新值调用 setState。

componentWillRecieveProps(nextProps) {
  this.setState({
    fieldName: nextProps.fieldName,
    value: nextProps.value
  });
}

此外，您可以添加检查以查看 value 和 fieldName 是否在 props 中更改。如果不是，您可以优化为不重新渲染组件。

【讨论】：

是的，它有助于更新状态，但输入字段中的defaultValue={this.state.value} 仍然为空。仅当fieldName 更改时才会更新值
要更新输入元素，您需要传递 initialValue 而不是 defaultValue。它仅在 fieldName 更改时更新，因为您正在根据 fieldName 设置键，因此组件已更改。
这意味着如果我传递了一些其他静态变量（从不更改）而不是 fieldName，这意味着所有其他字段也永远不会更改。有办法解决吗？
对不起，在这里更正。 initialValue 不是输入元素的道具。您可以使用 defaultValue 但仅在第一次安装组件时才有效。 value prop 是输入元素的当前值，但它不会重新渲染输入元素。我通常通过value 属性形成我的输入元素的键，这样当我传递一个新值时它就会出现。