reactjs - react : setting state and default input from prop

Question

我正在创建一个应用程序，允许用户创建评估(其他用户可以完成)。现在我正在开发一个“编辑”页面，用户在其中加载预先填充了相关数据的表单 - 但随后他就可以更改这些值。

但是，我在两件事上遇到了麻烦(我怀疑它们是相关的)。首先:输入字段不会显示从组件状态派生的默认值。

第二:如果我直接从 Prop 设置输入字段，我将无法再更改这些值。

组件传递一个名为block_data的 Prop ，它是一个包含字符串键/值对的字典。

我正在尝试将其加载转换为这样的状态

constructor(props) {
    super(props);

    this.state = {
        block: this.props.block_data,
        question_list: [],
        question_options: ['BO', 'SC', 'SR', 'NO'],
        block_list: [],
    };
    (..)
}

但是，这不起作用。当我 checkin chrome react 扩展时，状态未设置。

输入字段与我下面包含的示例非常相似。这里我从 props 中设置了它的值。在这种情况下，它确实显示了正确的初始数据。但我无法编辑它。

<input 
  onChange={e => this.changeIsANaturalPartOfLife(e)}
  value={this.props.block_data.title}
  name="title"
  />

下面是“更改时”功能。当我检查 chrome React 工具时，我可以看到当我开始输入时只有状态的第一个字母被更新。输入字段没有显示任何变化。

changeIsANaturalPartOfLife(e, optional) {

    const target = e.target;
    const name = target.name;
    const value = target.value;
    console.log(value);
    this.setState({ block: {[name]: value }});

}

我真的不知道该怎么办。我在这里尝试做的事情看起来很简单，但我无法超越这个有缺陷的阶段。有谁知道我做错了什么？

Answer 1

正如您在评论中提到的:“数据是从 DjangoRestAPI 加载的”。

第一个问题的解决方案:

您需要使用 componentwillreceiveprops 生命周期方法用新的 props 值更新状态(从服务器成功获取后)，否则子组件的状态将始终具有父组件的初始数据。

根据 DOC :

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

使用此方法:

componentwillreceiveprops(nextProps) {
   // compare nextProps.block_data and this.state.block if not equal
   this.setState({
       block: nextProps.block_data
   })
}

第二个问题的解决方案:

当您直接使用 props 而不是存储到 state 中时，您需要在 onChange 期间更新父组件中的值，因为您正在使用 this.props.value 并更新 this.state.value，因此 props.value 将始终相同，并且不允许您输入任何内容。