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

Posted 2023-02-23

【中文标题】错误的反应控制组件警告？

【英文标题】：erroneous react-controlled-components warning?

【发布时间】：2018-05-14 19:28:20

【问题描述】：

此 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);
   
 

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

【问题讨论】：

请同时发布您的handleUserNameChange 处理程序。我的猜测是因为父母试图在子组件输入上设置一个值。使用状态变量可能比直接输入 props.internals.username

更好

尝试在您的value= this.props.internals.username 中使用defaultValue 而不是value

我通常在这种情况下使用 defaultValue，但该值不会“显示”为默认值。处理它，闻起来像是一种竞争条件。

【参考方案1】：

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