React Context报错：object is not iterable问题求助

核心错误原因 #

你在Navbar组件里错误使用数组解构获取Context的值，但Context Provider提供的value是一个对象，对象无法被数组解构，这直接导致了"object is not iterable"的报错。

修复步骤 #

1. 修正Navbar中的Context获取方式 #

把数组解构改成对象解构：

// 错误写法
const [ActiveMenu, setActiveMenu, isClicked, setisClicked, handleClick] = useStateContext();

// 正确写法
const { ActiveMenu, setActiveMenu, isClicked, setisClicked, handleClick } = useStateContext();

2. 修复头像路径的语法错误 #

Navbar里的img标签src属性写法有误，多余的引号会导致路径解析错误：

// 错误写法
<img src="{avatar}" className="rounded-full w-8 h-8" alt="avatar.jpg" />

// 正确写法
<img src={avatar} className="rounded-full w-8 h-8" alt="avatar.jpg" />

3. 关于...initialState的说明 #

你代码里的setisClicked({ ...initialState, [clicked]: true });写法是正确的，展开运算符在这里用于重置所有状态为初始值，再将点击项设为true。编译器识别失败的问题大概率是你之前尝试的写法有误，当前这段代码逻辑没问题。

修复后的Navbar核心代码片段 #

const Navbar = () => {
  // 改为对象解构
  const { ActiveMenu, setActiveMenu, isClicked, setisClicked, handleClick } = useStateContext();

  return (
    <div className="flex justify-between p-2 md:mx-6 relative">
      {/* 其他代码保持不变 */}
      <TooltipComponent content="Profile" position="BottomCenter">
        <div
          className="cursor-pointer p-1 gap-2 flex items-center hover:bg-light-gray rounded-lg"
          onClick={() => handleClick("userProfile")}
        >
          {/* 修复src写法 */}
          <img
            src={avatar}
            className="rounded-full w-8 h-8"
            alt="avatar.jpg"
          />
          <p>
            <span>Hi, </span>
            <span>Michael</span>
          </p>
        </div>
      </TooltipComponent>
    </div>
  );
};

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