React - 使用 Hooks 时，出现错误 - Object 不可迭代（无法读取属性 Symbol (Symbol.iterator)）

Question

I use hooks inside the LessonThemes component, using the context, I try to access the color value inside the Test component, but I get an error

Object is not iterable (cannot read property Symbol (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 is a react component, it's providing the context to its children. CounterContext is the context you need to access in 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>
  );
}

You should probably also define an initial context value in case Test isn't being rendered into a React DOMTree with a CounterContext as an ancestor.

export const CounterContext = createContext([]);