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

我有一个页面，我从服务器中获取数据并为受控输入设置状态值.(例如，我输入的值为 this.state.name ，我从服务器获取名称，例如Dave，并将其设置为name，因此输入的值为Dave.它可以工作，但我得到了对象数组出现问题

I have a page where i fetch data from server and setting value in state for controlled inputs. (e.g I have input which has value of this.state.name, i fetch name from server for example Dave and set it in state as name, so value of input is Dave. it works but i got problem with array of objects

这就是状态

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

这就是我使用成分

{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>
))}

但这会导致此错误:

警告:组件正在将文本类型的受控输入更改为不受控制.输入元素不应从受控状态切换到非受控状态(反之亦然).确定在组件的使用寿命期间使用受控或不受控制的输入元素.更多信息: link

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

Why is that happening? How can I fix it?

P.S:我检查了一下，然后从服务器成功获取了食材

P.S: i checked and ingredients are succesfully fetched from server

更新:onChange事件的代码

UPDATE: code of onChange event

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