組件正在將文本類型的受控輸入更改為不受控制 - 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>
))}

但這會導致此錯誤：

警告：組件正在將文本類型的受控輸入更改為不受控制。 輸入元素不應從受控切換到不受控制（反之亦然）。 決定在組件的生命周期內使用受控或非受控輸入元素。 更多信息： link

為什么會這樣？ 我該如何解決？

PS：我檢查並成功從服務器獲取成分

更新：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 在應用程序運行期間觀察輸入的值。