为什么这个组件从受控切换到不受控制？ - 反应

Question

这是我的无状态反应组件：

export default ({acresMin, update}) => (
    <div>
        <input
            onChange={(e) => update({'acresMin': e.target.value})}
            placeholder="10"
            type="text"
            value={acresMin}/>
    </div>
)

当我更改input的值时，我收到此warning ：

Warning: StatelessComponent is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

我正在使用onChange更新并保存通过props填充的store的值。

我怎么不理解这个？

Answer 1

不受控制的输入不直接引用您的组件，而是引用组件中定义的输入字段。

反应区分控制和不受控制的部件 ：

没有value属性的<input>是一个不受控制的组件

首次渲染组件时，您的acresMin属性是否undefined ？ 这将导致输入首先被渲染为不受控制的输入，但是一旦设置了属性，就会将其作为受控制的输入。