React useReducer钩子使用问题：点击按钮后页面样式及文本未更新

你的问题出在reducer函数的返回逻辑上，有两个关键错误：

1. 逗号表达式导致返回值错误：你用了return (state = '${action.payload}', console.log(state))，逗号表达式会返回最后一个表达式的结果，而console.log()的返回值是undefined，所以每次dispatch后，state会被设置成undefined，这就导致页面背景样式失效、文本消失。
2. 多余的单引号包裹：你给颜色值额外加了单引号，就算逗号表达式的问题解决了，返回的颜色值会是'#2a9d8f'（带单引号），这不是合法的CSS颜色格式，背景依然不会生效。

修正后的reducer代码 #

把reducer改成这样：

const reducer = (state, action) => {
  switch (action.type) {
    case 'CHANGE_COLOR':
      console.log(action.payload);
      return action.payload;
    default:
      return state;
  }
};

完整修正代码 #

import "./styles.css";
import { useReducer } from 'react'

const colors = [
  '#2a9d8f',
  '#e9c46a',
  '#e76f51',
]

const reducer = (state, action) => {
  switch (action.type) {
    case 'CHANGE_COLOR':
      console.log(action.payload);
      return action.payload;
    default:
      return state
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, '#ffffff')

  return (
    <div className="App" style={{backgroundColor: state}}>
      {colors.map(color => {
        return (
          <button 
            key={color}
            className='colors' 
            style={{backgroundColor: color}} 
            onClick={() => {dispatch({ type: 'CHANGE_COLOR', payload: color })}}>{color}</button>
        )
      })}
      <span> Color: {state} </span>
    </div>
  );
}

关键说明 #

• Reducer的核心是返回新的状态值，不需要修改传入的state参数（state是不可变的），直接返回action.payload对应的颜色值即可。
• 调试用的console.log放在return之前，不要让它影响返回值。

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