React函数组件中使用useState修改对象数组状态失败，求解决方法

问题代码 #

用户原代码尝试切换数组中对象的clicked状态，但因返回值类型与原state不匹配导致失效：

import React, {useState} from "react";

const SideListItem = () => {
    const [showItem, setShowItem] = useState([
        {id: "List A", clicked: true},
        {id: "List B", clicked: true},
        {id: "List C", clicked: true},
    ]);
    
    const clickList = () => {
        const value = showItem[0].clicked;
        setShowItem(() => {
            const boolValue = value? false: value === true;
            return boolValue; // 错误：返回布尔值而非数组对象
        });
        return console.log(value);
    };
};

核心问题 #

React要求状态更新必须保持不可变性，且更新后的state类型需与初始类型一致。原代码直接返回布尔值，破坏了state的数组结构，导致状态更新异常。

可行实现方法 #

1. 切换指定索引的列表项（比如第一个元素）

通过map生成新数组，仅修改目标元素的clicked状态：

import React, { useState } from "react";

const SideListItem = () => {
  const [showItem, setShowItem] = useState([
    { id: "List A", clicked: true },
    { id: "List B", clicked: true },
    { id: "List C", clicked: true },
  ]);

  const clickList = () => {
    setShowItem(prevState => {
      return prevState.map((item, index) => {
        // 仅切换第一个元素的状态
        if (index === 0) {
          return { ...item, clicked: !item.clicked };
        }
        return item; // 其他元素保持原样
      });
    });
  };

  return (
    <div>
      <button onClick={clickList}>切换List A状态</button>
      {showItem.map(item => (
        <div key={item.id}>
          {item.id}: {item.clicked ? "展开" : "收起"}
        </div>
      ))}
    </div>
  );
};

export default SideListItem;

2. 切换所有列表项的状态

遍历数组，统一反转每个元素的clicked值：

const clickList = () => {
  setShowItem(prevState => 
    prevState.map(item => ({ ...item, clicked: !item.clicked }))
  );
};

3. 根据ID切换指定列表项

点击具体列表项时，仅切换对应ID元素的状态：

const toggleItemById = (targetId) => {
  setShowItem(prevState => 
    prevState.map(item => 
      item.id === targetId ? { ...item, clicked: !item.clicked } : item
    )
  );
};

// 渲染时绑定点击事件
{showItem.map(item => (
  <div key={item.id} onClick={() => toggleItemById(item.id)}>
    {item.id}: {item.clicked ? "展开" : "收起"}
  </div>
))}

关键要点 #

• 始终通过复制原数组/对象生成新的状态值，禁止直接修改原state
• 确保更新后的state类型与初始类型一致（数组不能改成布尔值/字符串）
• 使用函数式更新（setState(prev => ...)）能更可靠地获取最新状态值

内容的提问来源于stack exchange，提问作者Michael An