redux 工具包错误 object 不能反应子

Question

I try to take a task from the Tasks file and add it to Slice but there is a problem in the addtask method in task please help...........................................................................................................................................................................................................................................................

    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>

     
   
  )
}

   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

File using redux toolkit but react_devtools_backend.js:4026

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)

Answer 1

Instead of action.todos it has to be action.payload .

addTask  : (state,action) => {
               state.todos=[...state.todos , action.payload];
           }