Question

我得到“组件正在更改类型为undefined的不受控制的受控输入”

const [user, setUser] = useState({});
const {name} = user;

const handleInputChange = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    setUser((prevState) => {
        return {
            ...prevState,
            [name]: value,
        };
    });
};

当我渲染人物时

<input
    name="name"
    value={name}
    onChange={(e) => handleInputChange(e)}
/>

名称未定义，因此可能是触发警告的原因。但是我可以在用户内部创建名称吗？

我得到预期的结果只是想摆脱警告

如果我使用console.log（用户），我会看到这个名字。

Answer 1

仅在未定义时使用空字符串初始化输入。警告将消失。

<input
    name="name"
    value={name || ""}
    onChange={(e) => handleInputChange(e)}
/>

Answer 2

只需确保value从未被定义：

<input
    name="name"
    value={name || ''}
    onChange={(e) => handleInputChange(e)}
/>

如何修复组件正在更改类型为undefined的不受控制的输入

2 个答案: