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) }
          />

在控制台中生成此警告：

警告：组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换到受控制（或反之亦然）。决定在组件的使用寿命期间使用受控或不受控制的输入元件。更多信息：{{3}}

这是一个包含许多受控组件的大型react / redux应用程序，如果您按照上面的链接，我的代码看起来很好。

有人看到我的错误？我无法弄明白。状态值＆＃39;用户名可能是＆＃39;加载此表单时未定义，但这不是我通常用于调用未定义状态数据的警告/错误。

提前致谢！

@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);
   }
 }

这是竞争条件吗？我希望尝试访问和未定义的状态值出错，而不是＆＃34;受控输入＆＃34;警告...

Answer 1

这确实是一场竞争。我需要处理cookied并在父组件中相应地设置状态。 defaultValue现在也能正常工作。感谢您的反馈！

错误的反应控制组件警告？

1 个答案: