组件正在更改不受控制的文本类型的受控输入

Question

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

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

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]中。我在这里很新，请帮我解释一下这里发生的事情，这样我就可以了解这个概念或想法。

Answer 1

您几乎是正确的，但是您缺少一些东西：

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

您是说状态是一个包含title属性的对象，因此在设置状态时，您还必须设置一个对象，其标题也应来自值：）

Answer 2

列表状态应该是一个对象，并且在更改事件上更新状态时，可以将其更改为字符串。

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

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