组件正在将文本类型的受控输入更改为不受控制 - ReactJS

Question

我有一个页面，我在其中从服务器获取数据并为受控输入设置状态值。（例如，我有一个值为 this.state.name 的输入，我从服务器获取名称，例如 Dave，并将其设置为名称状态，因此输入的值为 Dave。它有效，但我遇到了对象数组的问题

所以这是状态

this.state = {
        ingredients: [{ ingredient: "", quantity: '' }],
        //other properties
   }

这就是我使用 ingredients

的方式

{this.state.ingredients.map(({ ingredient, quantity }, index) => (


   <div key={index}>
        ingredient: <input value={ingredient} className="ingredientClass" type="text" autoComplete="off" placeholder="e.g: pepper" onChange={{e => this.update(index, "ingredient", e.target.value)} />
        quantity: <input value={quantity} autoComplete="off" type="text" placeholder="e.g: 1g" onChange={e => this.update(index, "quantity", e.target.value)} />
        <button onClick={this.BtnClick}>delete</button> <br />
       {this.state.errorFor === 'ingredientsfield' ? this.state.errmsg : null}
   </div>
))}

但这会导致此错误：

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

为什么会这样？我该如何解决？

P.S: 我检查过，成分已从服务器成功获取

更新：onChange 事件代码

update(index, key, value) {
    this.setState(({ ingredients }) => ({ ingredients: ingredients.map((ing, i) => i === index ? { ...ing, [key]: value } : ing) }));
    console.log(this.state.ingredients)
}

Answer 1

问题是其中一个输入在某个时刻具有未定义或空值。

我无法理解是什么将您显示的代码中的输入值更改为 null（未定义）。但是你可以使用 ReactDevTools 在你的应用程序中观察输入的值运行.

组件正在将文本类型的受控输入更改为不受控制 - ReactJS

A component is changing a controlled input of type text to be uncontrolled - ReactJS

javascript

arrays

object

reactjs

controlled-component