Redux Toolkit添加任务报错：Objects are not valid as a React child

问题描述 #

尝试从Tasks组件调用addTask方法向Redux TaskSlice添加任务时，出现报错：Objects are not valid as a React child。以下是相关代码及错误栈信息：

Tasks组件代码 #

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTask } from '../redux/TaskSlice';

const Tasks = () => {
  const {todos} = useSelector(state => state.task);
  const Dispatch =useDispatch();

  const handdleAddTask = (task,time,e)=> {
    e.preventDefault();
    Dispatch(addTask({task,time}));
  }

  return (
    <React.Fragment >
      <form className='form'>
        <button onClick={()=>handdleAddTask('hello','hello')}>Add Task</button>
      </form>
      {todos.map((value,index)=>(
        <div key={index} className='form'>
          <h2>{value.Task}</h2>
          <h3>{value.Date_Time}</h3>
        </div>
      ))}
    </React.Fragment>
  )
}

TaskSlice代码 #

import { createSlice } from "@reduxjs/toolkit";

export const TaskSlice=createSlice({
    name:'task',
    initialState:{
        todos:[{
            Task:'Dentist appoitment',
            Date_Time:'Thursday at 3 p.m. ',
             },
             {
                Task:'Walk the dog',
                Date_Time:'Monady at 9 a.m',
                 },
        ],
    },
    reducers:{
      addTask : (state,action) => {
        state.todos=[...state.todos , action.todos];
        },
    }
});
export const {addTask}=TaskSlice.actions
export default TaskSlice.reducer

错误栈信息 #

The above error occurred in the <form> component:
    at form
    at Tasks (http://localhost:3000/main.77d176baa9988f89cb4e.hot-update.js:35:63)
    at div
    at App (http://localhost:3000/static/js/bundle.js:29:1)
    at Provider (http://localhost:3000/static/js/bundle.js:40147:5)

react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: [object RegExp]). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (react-dom.development.js:14887:1)
    at createChild (react-dom.development.js:15139:1)
    at reconcileChildrenArray (react-dom.development.js:15404:1)
    at reconcileChildFibers (react-dom.development.js:15821:1)
    at reconcileChildren (react-dom.development.js:19167:1)
    at updateHostComponent (react-dom.development.js:19924:1)
    at beginWork (react-dom.development.js:21618:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

问题排查与修复 #

1. Reducer中错误访问action参数 #

在TaskSlice的addTask reducer里，错误使用action.todos获取传入数据，但实际通过dispatch(addTask({task,time}))传入的内容存储在action.payload中。同时，传入的字段名（task、time）与现有todos数组的字段名（Task、Date_Time）不匹配，导致新增的任务对象结构错误，渲染时触发React子元素无效的报错。

修正后的TaskSlice reducer：

addTask : (state,action) => {
  // 匹配现有todos的字段结构，从action.payload中获取数据
  state.todos = [...state.todos, {
    Task: action.payload.task,
    Date_Time: action.payload.time
  }];
}

2. 事件参数传递错误 #

Tasks组件中，button的onClick调用handdleAddTask时未传递事件对象e，导致handdleAddTask中调用e.preventDefault()会抛出Cannot read properties of undefined错误。

修正后的button onClick代码：

<button onClick={(e)=>handdleAddTask('hello','hello',e)}>Add Task</button>

3. 规范变量命名（可选） #

组件中Dispatch变量名建议改为小写dispatch，符合React-Redux惯用命名规范：

const dispatch = useDispatch();

修复说明 #

修复后，新增任务对象结构与现有todos保持一致，React可正常渲染Task和Date_Time字段；同时事件参数传递正确，避免了额外报错。

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