在 React 應用程式中,更新陣列或物件的狀態可能很棘手。本文將引導您了解如何使用 setState 在狀態中更新 state.item[1],這是 React 中常見的任務。
在提供的 React 元件中,目標是建立使用者可以設計自己的欄位的動態表單。狀態最初看起來像這樣:
this.state.items[1] = { name: 'field 1', populate_at: 'web_start', same_as: 'customer_name', autocomplete_from: 'customer_name', title: '' };
當使用者更改任何值時嘗試更新狀態時會出現問題。定位正確的物件變得很困難。
要正確更新狀態,請按照以下步驟操作:
示例實現:
handleChange: function (e) { // 1. Make a shallow copy of the items let items = [...this.state.items]; // 2. Make a shallow copy of the item you want to mutate let item = {...items[1]}; // 3. Replace the property you're intested in item.name = 'newName'; // 4. Put it back into our array. N.B. we *are* mutating the array here, // but that's why we made a copy first items[1] = item; // 5. Set the state to our new copy this.setState({items}); }
替代實現:
let item = {...items[1], name: 'newName'}
this.setState(({items}) => ({ items: [ ...items.slice(0, 1), {...items[1], name: 'newName'}, ...items.slice(2) ] }));
以上是如何在 React 中使用 `setState` 更新 `state.item[1]`?的詳細內容。更多資訊請關注PHP中文網其他相關文章!