如何更新反应状态数组 - Javascript

在 React 应用中，状态是用来追踪用户界面的变化的。更新状态是反应应用程序状态更改所必须的元素之一。在这篇文章中，我们将学习如何更新反应状态数组。

定义状态数组

一个反应状态数组用来存储组件的状态数据。以下是一个示例，定义了一个包含一组数组项目的状态变量：

import React, { useState } from 'react';

function MyComponent() {
  const [items, setItems] = useState(['Apple', 'Banana', 'Cherry', 'Date']);

  return (
    <div>
      <h2>My Items:</h2>
      {items.map((item, idx) => (
        <div key={idx}>{item}</div>
      ))}
    </div>
  );
}

更新状态数组

更新状态数组需要使用 React Hook 中的 setState 函数。这个函数允许我们更新当前状态并更新应用程序的用户界面。

以下是一个示例，当用户点击“添加项目”按钮时，会向数组中添加一个新项目。在这个示例中，我们使用 spread 操作符将现有项目从状态数组中解构出来，并将新项目添加到新数组中：

import React, { useState } from 'react';

function MyComponent() {
  const [items, setItems] = useState(['Apple', 'Banana', 'Cherry', 'Date']);
  const [newItem, setNewItem] = useState('');

  const handleAddItem = () => {
    setItems([...items, newItem]);
    setNewItem('');
  };

  return (
    <div>
      <h2>My Items:</h2>
      {items.map((item, idx) => (
        <div key={idx}>{item}</div>
      ))}
      <input value={newItem} onChange={e => setNewItem(e.target.value)} />
      <button onClick={handleAddItem}>Add Item</button>
    </div>
  );
}

结论

在此，我们已经学习了如何更新反应状态数组。我们使用 useState Hook 定义和初始化状态数组，并使用 setState Hook 更新状态数组。如果想要了解更多信息，请查看 React 文档。