错误的反应控制组件警告

Question

此JSX代码段正在生成react-controlled-components警告：

          <input
            type="text"
            className="form-control endpoint-text"
            placeholder="fred.scuttle"
            value={ this.props.internals.username }
            onChange={ this.handleUserNameChange.bind(this) }
          />

在控制台中生成此警告：

警告：一个组件正在更改要控制的类型文本的不受控制的输入。输入元素不应从不受控制的转换为受控（反之亦然）。在组件的使用寿命中使用受控或不受控制的输入元素之间决定。更多信息：https：//reactjs.org/docs/forms.html#controlled-components

这是一个大型React/Redux应用程序，具有许多受控组件，如果您按照上面的链接，我的代码看起来不错。

有人看到我的错误吗？我无法弄清楚。加载此表单时，状态值"用户名"可能是不确定的，但这不是我通常调用未定义状态数据的警告/错误。

预先感谢！

@nandu kalidindi：

  handleUserNameChange = (event) => {
    this.props.emitSetUserName(event.target.value);
  }

仅设置/更新Redux状态的用户名字段：

export function emitSetUserName(uname) {
  return {
    type: EMIT_SET_NAME_CHANGE,
    payload: uname
  }
}

该状态变量的初始值是从同一组件中的cookie加载的：

 componentWillMount = () => {
   let username = cookies.get('uname');
   if ( username !== undefined ) {
     this.props.emitSetUserName(username);
   }
 }

这是种族条件吗？我希望尝试访问和未定义状态值的错误，而不是"控制的输入"警告...

Answer 1

这确实是一种种族条件。我需要处理煮熟的烹饪并在父组件中相应地设置状态。defaultValue现在也可以正常工作。感谢您的反馈！