React Todo项目点击添加按钮触发useSelector无效Hook调用错误

报错原因 #

核心问题是违反了Hook的使用规则，具体是你在AddTodo.jsx的按钮点击事件回调里直接调用了TodoList组件函数：

<button
  type= "submit"
  onClick={TodoList}>Add
</button>

React Hook只能在函数组件渲染的顶层作用域调用，点击事件触发时调用TodoList，此时处于事件回调的上下文，不属于组件正常渲染的上下文，TodoList内部的useSelector就触发了无效Hook调用报错。

修复方案 #

第一步：修正AddTodo组件的核心错误 #

把按钮的onClick绑定到你已经定义的addHandler添加逻辑上，不要直接绑定TodoList组件，同时将TodoList放到正常的组件渲染树中，顺便修正input属性的错误写法：

// AddTodo.jsx 修正后的return部分
return (
  <div>
    <input
      type="text"
      value={input} // 原属性名input错误，修正为value
      onChange={(event) => inputHandler(event.target.value)}
      placeholder="Enter here..."
    />
    <button
      type= "button" // submit类型默认会触发表单提交，这里改成button更合适
      onClick={addHandler}>Add
    </button>
    {/* TodoList作为正常组件放在渲染树中 */}
    <TodoList />
  </div>
);

第二步：修正其他配套逻辑的小问题 #

• actions.js中的SetValueInput无异步需求，不需要使用thunk异步写法，改成普通action创建函数即可：

// 修正后的SetValueInput
export const SetValueInput = (t) => {
  return {
    type: SET_VALUE,
    id:nextTodo++,
    text: t
  }
}

• TodoList.jsx里的列表渲染不要嵌套ul，把内部的ul改为li：

{list.map((todo) => (
  <li key={todo.id}>{todo.text}</li>
))}

• reducers.js里的初始状态调整为空数组，避免渲染无意义的空待办项：

let initial_state = []

修改完成后即可解决Hook报错，Todo功能也能正常运行。

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