一个组件正在将文本类型的受控输入更改为不受控制[关闭]答案

【问题标题】：A component is changing a controlled input of type of text to be uncontrolled [closed]一个组件正在将文本类型的受控输入更改为不受控制[关闭]
【发布时间】：2020-06-04 13:06:55
【问题描述】：

我收到错误警告，一个组件正在将文本类型的受控输入更改为不受控制。而且我对功能组件不太熟悉，因为我曾经在课堂上。我所做的只是：

为我的列表设置初始状态：

const [list, setList] = 
useState({title: ' '})

然后使用 onChange 设置我的标题 obj 的值：

const setTitle =e=> 
{setList(e.target.value)}

然后使用 onChange 获取它的值

<input type='text onChange= 
{setTitle} value={list.title} 
palceholder="Add" />

我尝试将输入的值设置为 value={list}，但我的文本框的占位符显示在 [object] [Object] 中。我是这里的超级新手，请帮我解释一下这里发生了什么，以便我了解这个概念或想法。

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

列表状态应该是一个对象，当您在更改事件上更新状态时，您会将其更改为字符串。

更新状态，以便您仅更新列表对象中的标题键，如下所示

const setTitle =e=>  {
    const value = e.target.value; // Remember to copy value into a variable since events are cleared by react
    setList(prev=> ({...prev, title: value}));
}

【讨论】：

列表不会是值，列表内的属性title会。

【解决方案2】：

你几乎是正确的，但你错过了一些东西：

setTitle = e => {
  const title = e.target.value;
  setList(prevState => ({ ...prevState, title }));
}

你是说状态是一个包含标题属性的对象，所以当你设置它时，你必须设置一个标题也来自值的对象:)

【讨论】：

【解决方案3】：

为了避免这种错误，安全地这样做：

<input type=text value={list} onChange={(e) => setList(e.target.value)} />

【讨论】：