主題提供者問題 (Theme Provider issue)

問題描述

主題提供者問題 (Theme Provider issue)

我正在嘗試為一個小項目設置主題提供程序。每次用戶單擊按鈕時，應用程序主題（顏色）都應該改變。假設我在一個單獨的文件中有四個主題，如下所示：

const themesArray = [
    { primaryColor: '#483639', secondaryColor: '#F7F7F7' },
    { primaryColor: '#fb7051', secondaryColor: '#333' },
    { primaryColor: '#60b494', secondaryColor: '#F7F7F7' },
    { primaryColor: '#afb5c0', secondaryColor: '#333' }
];

export default themesArray;

每次用戶單擊按鈕（嵌套在特定組件中）時，計數器都會遞增，直到 3，如下所示：

import React, { useState, useContext } from 'react';
import themesArray from '../../styles/themesArray';

const ThemeContext = React.createContext();
const ThemeUpdateContext = React.createContext();

const useTheme = () => useContext(ThemeContext);
const useThemeUpdate = () => useContext(ThemeUpdateContext);

const ThemeProvider = ({ children }) => {

    const [state, setState] = useState({
        count: 0,
        primaryColor: themesArray[0].primaryColor,
        secondaryColor: themesArray[0].secondaryColor
    });

    const toggleTheme = () => {
        setState(prevState => ({
            count: prevState.count >= 3 ? 0 : ++prevState.count,
            primaryColor: themesArray[prevState.count].primaryColor,
            secondaryColor: themesArray[prevState.count].secondaryColor
        }));
    }

    return (
        <ThemeContext.Provider value={[state.primaryColor, state.secondaryColor]}>
            <ThemeUpdateContext.Provider value={toggleTheme}>
                {children}
            </ThemeUpdateContext.Provider>
        </ThemeContext.Provider>
    );

}

export { ThemeProvider, useTheme, useThemeUpdate };

計數器似乎工作正常，但問題是我永遠不會回到我的第一個對象值（我永遠不會回到第一個主題顏色）。我的意思是當我 console.log(state.count, state.primaryColor, state.secondaryColor) 我得到這個：

0 #483639 #F7F7F7 ThemeContext.js:24
1 #fb7051 #333 ThemeContext.js:24
2 #60b494 #F7F7F7 ThemeContext.js:24
3 #afb5c0 #333 ThemeContext.js:24
0 #afb5c0 #333 ThemeContext.js:24
1 #fb7051 #333 ThemeContext.js:24
2 #60b494 #F7F7F7 ThemeContext.js:24
3 #afb5c0 #333 ThemeContext.js:24
0 #afb5c0 #333 ThemeContext.js:24

你知道為什麼第一個對象的值會被最後一個對象覆蓋嗎每次計數器值回到0時的對象值？

參考解法

方法 1:

You are mutating the state ++prevState.count which is a problem.

Treat state as if it were immutable

Moreover you can use modulo instead:

const toggleTheme = () => {
    setState(prevState => {
      const nextCount = prevState.count + 1;
      return {
        count: nextCount % 3,
        primaryColor: themesArray[nextCount].primaryColor,
        secondaryColor: themesArray[nextCount].secondaryColor
      };
    });
  };

Full example:

const themesArray = [
  { primaryColor: "#483639", secondaryColor: "#F7F7F7" },
  { primaryColor: "#fb7051", secondaryColor: "#333" },
  { primaryColor: "#60b494", secondaryColor: "#F7F7F7" },
  { primaryColor: "#afb5c0", secondaryColor: "#333" }
];

const ThemeContext = React.createContext();
const ThemeUpdateContext = React.createContext();

const useTheme = () => useContext(ThemeContext);
const useThemeUpdate = () => useContext(ThemeUpdateContext);

const ThemeProvider = ({ children }) => {
  const [state, setState] = useState({
    count: 0,
    primaryColor: themesArray[0].primaryColor,
    secondaryColor: themesArray[0].secondaryColor
  });

  const toggleTheme = () => {
    setState(prevState => {
      const nextCount = prevState.count + 1;
      return {
        count: nextCount % 3,
        primaryColor: themesArray[nextCount].primaryColor,
        secondaryColor: themesArray[nextCount].secondaryColor
      };
    });
  };

  return (
    <ThemeContext.Provider value={[state.primaryColor, state.secondaryColor]}>
      <ThemeUpdateContext.Provider value={toggleTheme}>
        {children}
      </ThemeUpdateContext.Provider>
    </ThemeContext.Provider>
  );
};

const Button = () => {
  const [primaryColor] = useTheme();
  const toggle = useThemeUpdate();
  return (
    <button
      onClick={toggle}
      style={{ width: 500, height: 500, backgroundColor: primaryColor }}
    >
      Button
    </button>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <Button />
    </ThemeProvider>
  );
};

(by chalatum、Dennis Vash)

參考文件

1. Theme Provider issue (CC BY‑SA 2.5/3.0/4.0)