在React.js中如何使用useState修改一维数组的单个元素

首先先完成数组状态的基础声明：

import { useState } from 'react';

// 示例为初始长度为3的布尔数组，可根据实际需求调整初始值
const [arrayName, setArrayName] = useState([false, false, false]);

访问指定位置的元素 #

访问逻辑和普通JS数组完全一致，直接通过下标取值即可，对应示例写法如下：

console.log(arrayName[2]);

修改指定位置的元素 #

React的状态遵循不可变原则，直接对原数组下标赋值（arrayName[2] = true）不会触发组件重渲染，是无效写法。正确写法需要生成新数组后传入状态更新函数，常用两种写法：

• 扩展运算符复制后修改

// 先复制原数组生成新数组
const newArray = [...arrayName];
// 修改新数组对应位置的值
newArray[2] = true;
// 传入状态更新函数触发重渲染
setArrayName(newArray);

• map方法生成新数组（适合批量/条件修改场景）

// 基于之前的状态直接生成新数组
setArrayName(prev => prev.map((item, index) => index === 2 ? true : item));

注意：如果数组元素为引用类型（对象、嵌套数组），修改时还需要对对应位置的元素做深拷贝，避免直接修改原引用导致的状态异常

内容的提问来源于stack exchange，提问作者Boidurja Talukdar