当前位置：首页 > React

react如何创建数组

2026-03-30 22:31:47React

创建数组的方法

在React中创建数组的方式与普通JavaScript一致，以下是几种常见方法：

直接使用字面量创建

const array = [1, 2, 3];

使用Array构造函数

const array = new Array(1, 2, 3);

使用Array.from()方法

const array = Array.from({ length: 3 }, (_, i) => i + 1); // [1, 2, 3]

使用扩展运算符

react如何创建数组

const existingArray = [1, 2];
const newArray = [...existingArray, 3]; // [1, 2, 3]

React中的数组使用

在React组件中，数组常用于渲染列表：

function ListComponent() {
  const items = ['Apple', 'Banana', 'Orange'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

数组操作方法

React中常用的数组操作方法包括：

添加元素

react如何创建数组

const newArray = [...oldArray, newItem];

删除元素

const newArray = oldArray.filter(item => item.id !== idToRemove);

更新元素

const newArray = oldArray.map(item => 
  item.id === idToUpdate ? {...item, ...updatedProps} : item
);

状态管理中的数组

在使用useState管理数组状态时：

const [items, setItems] = useState([]);

// 添加新项目
const addItem = newItem => {
  setItems(prevItems => [...prevItems, newItem]);
};

// 删除项目
const removeItem = id => {
  setItems(prevItems => prevItems.filter(item => item.id !== id));
};