Redux行为异常求助：React-Redux新手遇两类控制台问题

嘿，我刚上手React-Redux的时候也栽过这俩跟头，熬了好几天才搞明白！咱们一步步来捋清楚：

问题1：onClick事件在页面加载时自动触发 #

这个问题其实是个新手常犯的语法错误——你大概率是在绑定事件的时候直接调用了函数，而不是传递函数的引用。

举个错误写法的例子：

<div onClick={handleTileClick()}>点击我</div>

这里的handleTileClick()会在组件渲染时直接执行，因为你加了括号，相当于把函数执行的结果传给了onClick，而不是函数本身。

正确的写法分两种情况：

• 如果不需要传参数，直接传函数引用：

<div onClick={handleTileClick}>点击我</div>

• 如果需要传参数，用箭头函数包裹（这样只有点击时才会执行内部的函数调用）：

<div onClick={() => handleTileClick(tileId)}>点击我</div>

这样就只会在用户点击元素时才触发事件处理函数啦。

问题2：Reducer收到'TOGGLE_TILE'动作但返回undefined #

Reducer的核心规则是必须始终返回一个状态值，绝对不能返回undefined。出现这个问题通常有两个原因：

1. 缺少default case
   Reducer是个纯函数，当收到匹配不到的action类型时，必须返回当前的状态。如果你的switch语句里没有default分支，就会在这种情况下返回undefined。

   正确的写法要加上default：

function tileReducer(state = initialState, action) {
  switch(action.type) {
    case 'TOGGLE_TILE':
      // 这里处理状态更新逻辑，返回新的状态
      return {
        ...state,
        // 根据action.payload修改对应的tile状态
        [action.payload.tileId]: !state[action.payload.tileId]
      };
    // 必须加上default，返回原状态
    default:
      return state;
  }
}

2. TOGGLE_TILE的case里没有return语句
   检查你处理'TOGGLE_TILE'的代码块，是不是只修改了state但忘了返回新的状态？比如这种错误写法：

case 'TOGGLE_TILE':
  state[action.payload.tileId] = !state[action.payload.tileId]; // 直接修改原state，而且没return

记住，Reducer不能直接修改原状态（这会破坏Redux的不可变状态原则），必须返回一个新的状态对象，比如用展开运算符复制原状态后再修改。

只要把这两点修正，Reducer就不会再返回undefined了。

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