警告：在 React js 中，组件正在将受控输入更改为不受控

Question

帮助。我使用反应钩子，当我输入输入时出现错误。

错误：

警告：组件正在将受控输入更改为不受控。这可能是由于值从已定义更改为未定义导致的，这种情况不应该发生。在组件的生命周期内决定使用受控或非受控输入元件。

代码：

const AddUser = () => {
const initialUserState = {
    id: null,
    name: '',
    age: 0
}

const [users, setUsers] = useState(initialUserState)

const handleChange = (e) => {
    setUsers({ [e.target.name]: e.target.value })

    e.preventDefault()
}    

return (
    <div>
        <input name="name" type="text" value={users.name} onChange={handleChange}/>
        <input name="age" type="number" value={users.age} onChange={handleChange}/>
    </div>
)}

Answer 1

本页和本段可以帮助您理解该问题。

当您通过事件侦听器获取更新的输入时，onChange您不需要再次通过value属性传递数据。

当数据通过属性传递时，value组件被视为“受控”。这意味着该组件由您的代码控制，不应接收用户输入。

如果您只想设置默认值，可以使用该defaultValue属性。

要删除警告，只需删除value={/* Something */}.