React - 使用 Hooks 时，出现错误 - 对象不可迭代（无法读取 属性 符号（Symbol.iterator））

Question

我在 LessonThemes 组件中使用挂钩，使用上下文，我尝试访问 Test[=27= 中的 color 值] 组件，但出现错误

对象不可迭代（无法读取属性符号（Symbol.iterator））

LessonThemes.jsx

import React, {useState, useEffect, createContext} from "react";
import ThemeContext from "./ThemeContext";

export const CounterContext = createContext();

export default function LessonThemes(props) {
    const [color, setColor] = useState(localStorage.getItem("color"));

    const [themes, setThemes] = useState([
        { name: "G", color: "green" },
        { name: "R", color: "red" },
        { name: "B", color: "blue" },
    ])

    useEffect(() => {
        localStorage.setItem("color", color);
    })

    const SideBarPageContent = (SideBarPageContentBackground) => {
        localStorage.setItem('color', SideBarPageContentBackground);
        setColor(SideBarPageContentBackground);
    }

    return (
        <CounterContext.Provider value={[color, setColor]}>
            {
                themes.map((theme, index) => {
                    return (
                        <label key={index}>
                            <input
                                onChange={() => SideBarPageContent(theme.color)}
                                type="radio"
                                name="background"
                            />{theme.name}</label>
                    );
                })
            }
        </CounterContext.Provider>
    );
}

Test.jsx

export default function Test(props) {

  const [color] = useContext(LessonThemes);

  return (
    <div>
      <div className="sidebar-brand-container">
        <LessonThemes />
      </div>
      <div>
        <span style={{ background: color }} href="#">Theme</span>
      </div>
    </div>
  );
}

Answer 1

LessonThemes 是一个 React 组件，它为其 children 提供上下文。 CounterContext 是您需要在 Test 中访问的上下文。

import { CounterContext } from '../path/to/CounterContext';

export default function Test(props) {

  const [color] = useContext(CounterContext);

  return (
    <div>
      <div className="sidebar-brand-container">
        <LessonThemes />
      </div>
      <div>
        <span style={{ background: color }} href="#">Theme</span>
      </div>
    </div>
  );
}

您可能还应该定义一个初始上下文值，以防 Test 没有被渲染到以 CounterContext 作为祖先的 React DOMTree 中。

export const CounterContext = createContext([]);