react如何创建数组

创建数组的方法

在React中创建数组与普通JavaScript相同，可以使用多种方式。以下是常见的几种方法：

使用数组字面量

const array = [1, 2, 3, 4];

使用Array构造函数

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

使用Array.from方法

const array = Array.from({ length: 4 }, (_, index) => index + 1);

使用扩展运算符

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

在React组件中使用数组

在React组件中，数组常用于渲染列表或管理状态：

渲染列表

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

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

使用useState管理数组状态

import { useState } from 'react';

function ArrayStateComponent() {
  const [array, setArray] = useState([1, 2, 3]);

  const addItem = () => {
    setArray([...array, array.length + 1]);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {array.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

数组常用操作

添加元素

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

删除元素

const filteredArray = array.filter(item => item !== itemToRemove);

更新元素

const updatedArray = array.map(item => 
  item.id === idToUpdate ? updatedItem : item
);