React - 使用 Hooks 時，出現錯誤 - Object 不可迭代（無法讀取屬性 Symbol (Symbol.iterator)）

Question

我在LessonThemes組件中使用鈎子，使用上下文，我嘗試訪問Test組件中的color值，但出現錯誤

Object 不可迭代（無法讀取屬性符號（Symbol.iterator））

課程主題.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>
    );
}

測試.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是一個反應組件，它為它的孩子提供上下文。 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([]);