React Input 元素不应从不受控切换到受控（反之亦然）

Question

我在 React 组件中有下一个构造函数

constructor(props){
    super(props);
    this.state = {
      socket:null,
      state:'main',
      match:{
        creationDate:'',
        host:'',
        players:[]
      },
      name1:'',
      name2:'',
    }

然后我这样定义输入：

<Input style={{width: 100 + '%'}} readOnly value={this.state.match.host}></Input>

我收到了下一个警告：警告：组件正在将不受控制的文本类型输入更改为受控制。输入元素不应从不受控制切换到受控（反之亦然）。在组件的生命周期内决定使用受控或非受控输入元素。

据我所知，只需像我一样定义变量状态的初始值即可。

感谢您的帮助。

Answer 1

您提供的输入似乎 value 从 undefined 更改为某个字符串。这让 React 认为您正在从不受控制的输入（值 = undefined）切换到受控的输入。

一种解决方法是将 value 切换为 defaultValue，并添加具有相同值的 key 属性，如下所示：

<Input style={{width: 100 + '%'}} readOnly defaultValue={this.state.match.host} key={this.state.match.host}></Input>

更改 key 将确保输入在每次更改时都使用更新的 defaultValue 重新呈现。

或者，首先尝试找出将 undefined 传递给输入 value 的原因。

React Input 元素不应从不受控切换到受控（反之亦然）

React Input elements should not switch from uncontrolled to controlled (or vice versa)

reactjs

reactstrap