為什么這個組件從受控切換到不受控制？ - 反應

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 ？ 這將導致輸入首先被渲染為不受控制的輸入，但是一旦設置了屬性，就會將其作為受控制的輸入。