React Context报错：TypeError对象不可迭代，求解决方案

错误根源 #

你在TokenListBox组件中用数组解构获取上下文值，但TokenProvider实际提供的是包含selectedTokens和setSelectedTokens的对象——数组解构仅支持可迭代类型（如数组），对象无法被数组解构，因此触发该错误。同时你给TokenProviderContext设置的初始值是数组[]，和实际上下文值类型不匹配，进一步加剧了问题。

修复方案 #

1. 修正Context的初始值与类型定义 #

将TokenProviderContext的初始值改为符合实际结构的对象，同时明确类型（避免使用any）：

// TokenProviderContext.tsx
import { createContext, useContext, useMemo, useState, ReactElement } from 'react';

// 补充IToken类型定义（根据你的实际业务调整）
interface IToken {
  symbol: string;
  name: string;
  iconSrcUrl: string;
}

// 定义上下文的类型结构
interface TokenContextType {
  selectedTokens: IToken[];
  setSelectedTokens: React.Dispatch<React.SetStateAction<IToken[]>>;
}

// 设置匹配实际结构的初始值，避免类型不兼容
const TokenProviderContext = createContext<TokenContextType>({
  selectedTokens: [],
  setSelectedTokens: () => {},
});

export const TokenProvider = ({
  children,
}: {
  children: ReactElement | ReactElement[];
}) => {
  // 页面加载时将tokens初始化为[]，替换原sampleTokenList
  const [selectedTokens, setSelectedTokens] = useState<IToken[]>([]);

  const contextValue = useMemo(
    () => ({
      selectedTokens,
      setSelectedTokens,
    }),
    [selectedTokens, setSelectedTokens],
  );

  return (
    <TokenProviderContext.Provider value={contextValue}>
      {children}
    </TokenProviderContext.Provider>
  );
};

export const useTokenProvider = () => useContext(TokenProviderContext);

2. 组件中改用对象解构获取上下文值 #

在TokenListBox中把数组解构替换为对象解构：

// TokenListBox.tsx
export default function TokenListBox({ tokenList }: { tokenList: IToken[] }) {
  // 用对象解构替代数组解构
  const { selectedTokens, setSelectedTokens } = useTokenProvider();

  // 移除不必要的useEffect：因为selectedTokens初始值已经是[]
  // useEffect(() => {
  //   if (!selectedTokens) {
  //     setSelectedTokens([]);
  //   }
  // }, [selectedTokens, setSelectedTokens]);

  return (
    <Listbox value={selectedTokens} onChange={setSelectedTokens} multiple>
      {/* 原组件渲染内容保持不变 */}
    </Listbox>
  );
}

额外优化说明 #

• 移除了冗余的useEffect，因为selectedTokens的初始值已设为[]
• 给Context添加了明确的类型约束，避免any带来的类型风险
• 简化了TokenProvider的children类型定义，React原生的类型已足够覆盖场景

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