如何使用 React 的 useState Hook 將元素推送到狀態數組中？

使用React Hooks 將元素推入狀態數組(useState)

React useState hook 提供了一種處理功能組件內狀態的機制。與類別元件使用 this.setState() 更新狀態不同，useState 引入了狀態更新函數來修改元件的狀態。

如何將元素推入數組狀態

要使用useState 將元素推送到數組狀態，您可以按照以下步驟操作：

1. 使用useState 鉤子以陣列初始化您的狀態：

   <code class="js">const [theArray, setTheArray] = useState([]);</code>

   登入後複製
2. 建立一個名為setTheArray 的狀態更新函數，它允許您修改陣列狀態。

3. 要將元素推入數組，請呼叫 setTheArray 並傳入一個函數傳回更新後的陣列。此函數應將前一個狀態(oldArray) 作為參數：

   <code class="js">setTheArray(oldArray => [...oldArray, newElement]);</code>

   登入後複製

回呼形式與非回呼形式

中大多數情況下，建議在狀態內更新數組時使用回調形式。這是因為狀態更新是異步的，這意味著它們的執行不是立即的。透過使用回呼形式，您可以確保最新版本的狀態始終用於陣列更新。

但是，在某些情況下，您可以使用非回呼形式而不會出現任何問題。僅當您僅在特定使用者事件（例如單擊事件）的處理程序中更新數組狀態時，這才適用。

推播元素的範例

考慮下列React示範將元素推入陣列狀態的元件範例：

<code class="js">const {useState} = React;

function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
    };
    
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>
            {theArray.map(entry => <div>{entry}</div>)}
        </div>
    ];
}

ReactDOM.render(<Example />, document.getElementById("root"));</code>

在此範例中，當您按一下「新增」按鈕時，addEntryClick 處理程序使用回調函數呼叫setTheArray，該回呼函數傳回一個新數組，其中包含新元素追加到末尾。

透過利用 React 的 useState hook 中的 push 方法，您可以有效地管理狀態數組，無論是新增、刪除或修改其內容，以實現更有效率且可維護的程式碼庫。

以上是如何使用 React 的 useState Hook 將元素推送到狀態數組中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！