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。

反应输入元素不应从不受控制的状态切换为受控制的状态（反之亦然）

1 个答案: