尝试设置默认值的 Material-UI 文本字段和 Redux 状态的奇怪行为？答案

【问题标题】：Strange behaviour with Material-UI Text Field and Redux state trying to set default value?尝试设置默认值的 Material-UI 文本字段和 Redux 状态的奇怪行为？
【发布时间】：2016-08-15 19:02:54
【问题描述】：

我正在尝试通过从我的 Redux 状态获取值来为文本字段设置 defaultValue 属性，但是它没有相应地更新。

我已将值作为道具从容器组件传递到我的编辑组件，如下所示：

render() {

const {data} = this.props

     return (
          <editcomponent value={this.props.data.value}
     )
}

const mapStateToProps = (state) => {

  return {
    data: state.dataReducer
  }

}

在我的编辑组件中，我尝试先显示它，效果很好：

render() {

     return (
          <h3>this.props.value</h3>
     )
}

当我用 Redux 状态的新数据重新加载页面时，它会相应地更新。但是，当我尝试完全相同的操作时，除了设置 defaultValue 的文本字段外，它不会更新。

这不起作用：

render() {

     return (
          <TextField id="textfield_id" defaultValue={this.props.value}/>
     )
}

它会在初始时间工作，然后当我用新数据重新加载页面时，它不会将 defaultValue 设置为新数据，它保持与原来相同。如果我改用 value，那么它会更改数据，但不允许我再编辑文本框的值。

我该如何解决这个问题？我希望能够通过我的 Redux 状态设置 defaultValue，并允许在用户更改/删除文本框中的内容时更改该值。

【问题讨论】：

标签： javascript reactjs redux material-ui

【解决方案1】：

我有同样的问题，我通过以下方式解决了：https://stackoverflow.com/a/36959225/842097

不要使用defaultValue，而是在状态中设置initialValues

initialValues: { name: theName }

【讨论】：

【解决方案2】：

我也遇到过这个错误，解决方法是先将 props 映射到一个状态，然后使用该状态而不是 value prop。

function updateValue(e) {
  this.setState({ value: e.target.value });
}

render {
  return (
    <TextField id="textfield_id" value={this.state.value} onChange={this.updateValue}/>
  );
}

【讨论】：