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

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

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

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

Answer 2

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

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

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

Answer 3

为避免此类错误，请放心地这样做：

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

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

3 个答案: