react动态往数组添加值怎么实现

在 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 函数会被调用，将新值添加到数组中，并通过重新渲染组件来更新视图。