反应：不受控制的/受控的输入

Question

我正在学习React，我创建了一个非常简单的“购物清单应用”。现在一切正常，但我收到此错误消息：“警告：组件正在将要控制的文本类型的不受控制的输入更改。输入元素不应从不受控制的状态切换到受控制的状态（反之亦然）。决定使用受控制的还是不进行控制。组件生命周期中不受控制的输入元素”。

这是我的代码：

function InputArea（props）{

const [inputText, setInputText] = useState({
   inputText: {text: ""}
});

function handleChange(event){
    setInputText(event.target.value);
}

function handleClick(event) {
    props.onSubmit(inputText);
    setInputText({text: ""});
    event.preventDefault();
}

return(
         <div className="input-group w-50">
            <input 
                type="text" 
                className="form-control" 
                onChange={handleChange} 
                ariadescribedby="button-addon" 
                value={inputText.text} 
                placeholder="Insert Item">
            </input>
        <div className="input-group-append">
            <Button
                id="button-addon"
                color="dark"
                style={{marginBottom: "2rem"}} 
                onClick={handleClick}>Add Item
            </Button>
        </div>
    </div>
)

当我想重置输入以查看占位符而不是最后添加的项的名称时，出现问题。

Answer 1

问题在于如何更新状态，如何使用状态以及如何初始化状态。

与类中的setState不同，使用钩子时，状态更新器的值不会合并，而是在运行时被替换

setInputText({text: ""}); 

您的inputText已从其先前的结构]中替换。

{
   inputText: {text: ""}
}
引起您的错误

由于您正在使用inputText.text设置输入字段的值，所以也必须以这种方式初始化状态

const [inputText, setInputText] = useState({
   text: ""
}); // initialise as an object

function handleChange(event){
    setInputText({ text: event.target.value }); // update the state object with text field
}

function handleClick(event) {
    props.onSubmit(inputText);
    setInputText({text: ""});
    event.preventDefault();
}

return(
         <div className="input-group w-50">
            <input 
                type="text" 
                className="form-control" 
                onChange={handleChange} 
                ariadescribedby="button-addon" 
                value={inputText.text} 
                placeholder="Insert Item">
            </input>
        <div className="input-group-append">
            <Button
                id="button-addon"
                color="dark"
                style={{marginBottom: "2rem"}} 
                onClick={handleClick}>Add Item
            </Button>
        </div>
    </div>
)