javascript - ReactJS - 如何从通过获取数据填充的 Prop 正确初始化状态？

Question

这是我的编辑组件:

class EditField extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }
  edit(e) {
    this.setState({ value: e.target.value });
    if (e.keyCode === 13) {
      this.props.onEdited(this.state.value);
    }
  }
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          onChange={this.edit.bind(this)}
        />
      </div>
    )
  }
}

我需要像这样从 props 填充状态:

function Container({ entity, onEdited }) {
  return (
    <div>
      <EditField onEdited={onEdited} value={entity.firstName} />
      <EditField onEdited={onEdited} value={entity.lastName} />
    </div>
  );
}

Container 组件从 redux store 获取 onEdited 和 entity 属性。Container 的父级将处理数据获取和 onEdited(这将仅在用户点击 Enter 时触发)将 dispatch 请求到服务器。

我的问题是如何正确初始化 value Prop ？因为如果我使用:

  componentDidMount() {
    this.setState({
      value: this.props.value
    });
  }

我得到空状态是因为 componentDidMount 时获取数据还没有完成叫。如果我使用:

  componentWillReceiveProps(nextProps) {
    this.setState({
      value: nextProps.value
    });
  }

我收到了这个警告:

Warning: EditField is changing a controlled input of type text to be
unncontrolled. Input elements should not switch from controlled to
uncontrolled (or vice versa). Decide between using a controlled or
uncontrolled input element for the lifetime of the component.

那么，如何正确地做到这一点呢？

Answer 1

这是我的建议:

• 您可以使用 EditField 中的 getInitialState 来填充 value 属性中的 value 状态。但这行不通，因为 getInitialState 只会被调用一次，因此后续渲染不会更新状态。此外，this is an anti-pattern .
• 您应该控制 EditField 组件。始终将当前 value 作为 prop 传递并完全停止处理状态。如果您想要一个库来帮助您链接输入状态与 Redux，请查看 Redux-Form .
• 你创建的 onEdited 事件，至少你做的方式，不能很好地处理受控输入，所以，你想要做的是有一个 onChange 事件始终以新值触发，因此 Redux 状态将始终发生变化。您可能在用户按下回车键时触发了另一个事件(例如 onEnterPressed)，因此您可以调用服务器并更新实体值。再次。 Redux-Form 在这里可以提供帮助。
• 显然 entity.firstName 和 entity.lastName 只能包含用户已确认(按回车)的值，而不是临时值。如果是这种情况，请尝试将表单状态与实体状态分开。表单的状态可以通过 Redux-Form 来控制。当用户按下回车键时，您可以触发一个实际调用服务器并更新实体状态的操作。你甚至可以有一个“加载”状态，这样你的表单在你调用服务器时被禁用。