在 React 中,我們可以使用 useState
鉤子來創建一個包含動態值的數組,并使用 setArray
函數來更新數組的值。
下面是一個簡單的例子,演示了如何往數組中添加新值:
import React, { useState } from 'react';
function App() {
const [array, setArray] = useState([]);
const addItem = () => {
// 創建一個新數組,將舊數組的值和新值合并
const newArray = [...array, '新值'];
setArray(newArray);
};
return (
<div>
<button onClick={addItem}>添加新值</button>
<ul>
{/* 遍歷數組,渲染列表 */}
{array.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
export default App;
在上面的例子中,我們使用 useState
創建了一個名為 array
的數組狀態,并初始化為空數組。然后,我們定義了一個 addItem
函數,該函數在按鈕點擊時被調用。addItem
函數首先創建一個新的數組 newArray
,通過將舊數組的值和新值進行合并。最后,我們使用 setArray
更新狀態數組為 newArray
。
在組件的渲染中,我們使用 map
方法來遍歷數組并渲染一個帶有每個數組項的列表。key
屬性需要設置為唯一值,這里我們使用 index
作為 key
,但在實際應用中最好使用一個唯一的 id
。
當按鈕被點擊時,addItem
函數會被調用,將新值添加到數組中,并通過重新渲染組件來更新視圖。