溫馨提示×

react動態(tài)往數(shù)組添加值怎么實現(xiàn)

小億
193
2024-01-23 14:37:20
欄目: 編程語言

在 React 中，我們可以使用 useState 鉤子來創(chuàng)建一個包含動態(tài)值的數(shù)組，并使用 setArray 函數(shù)來更新數(shù)組的值。

下面是一個簡單的例子，演示了如何往數(shù)組中添加新值：

import React, { useState } from 'react';

function App() {
  const [array, setArray] = useState([]);

  const addItem = () => {
    // 創(chuàng)建一個新數(shù)組，將舊數(shù)組的值和新值合并
    const newArray = [...array, '新值'];
    setArray(newArray);
  };

  return (
    <div>
      <button onClick={addItem}>添加新值</button>
      <ul>
        {/* 遍歷數(shù)組，渲染列表 */}
        {array.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

在上面的例子中，我們使用 useState 創(chuàng)建了一個名為 array 的數(shù)組狀態(tài)，并初始化為空數(shù)組。然后，我們定義了一個 addItem 函數(shù)，該函數(shù)在按鈕點擊時被調用。addItem 函數(shù)首先創(chuàng)建一個新的數(shù)組 newArray，通過將舊數(shù)組的值和新值進行合并。最后，我們使用 setArray 更新狀態(tài)數(shù)組為 newArray。

在組件的渲染中，我們使用 map 方法來遍歷數(shù)組并渲染一個帶有每個數(shù)組項的列表。key 屬性需要設置為唯一值，這里我們使用 index 作為 key，但在實際應用中最好使用一個唯一的 id。

當按鈕被點擊時，addItem 函數(shù)會被調用，將新值添加到數(shù)組中，并通過重新渲染組件來更新視圖。

0 踩