Javascript 使用 useSatate 更新 React JS 数组中的状态

我是react js的新手，我正在try 创建一个待办事项列表应用程序.

我使用一个模式从CreateTask组件获取两个用户输入(任务名称和描述)，并将这些用户输入作为对象传递给TodoList组件.然后我try 更新状态并显示列表.但它总是显示为空.

如果有人帮我解决这个问题，我真的很感激.

这是我的密码.

TodoList function Component

import React, { useState, Fragment } from 'react'
import CreateTask from './modals/CreateTask'

const TodoList = () => {

const[modal,setModal] = useState(false);
const[taskList, setTaskList] = useState([]);


const toggle = () =>{
    setModal(!modal);
}

//saveTask function to update the taskList state

const saveTask = function (taskOBJ){

    let arr = taskList.concat(taskOBJ);
    setTaskList(...taskList, arr);
    setModal(false);

    
    console.log(arr) // arr displays Name and Description values correctly in the console
}

  return (
      <Fragment>
            <div className='header text-center'>
                <h1>Todo List</h1>
                <button className='btn btn-primary mt-2' onClick={()=>{setModal(true)}} >Create a Task</button>
            </div>

            <div className='task-container'>

             //Displaying the task name here. 

              { taskList.map((list)=> {                    
                
                  <li>{list.Name}</li>             
               
                
                 }) 
              }
 
            </div>
            <CreateTask modal={modal}  toggle={toggle} save={saveTask}/>
    </Fragment>

  )
}

export default TodoList

This is the CreateTask Function Component

    import React, { useState } from 'react'
    import {Button, Modal, ModalBody, ModalHeader,  ModalFooter} from 'reactstrap';
    
    
    const CreateTask = ({modal, toggle, save}) => {
    
            const[taskName, setTaskName] = useState("");
            const[description, setDescription] = useState("");
    
            // FUNCTION handleChange
            const handleChange = (e)=>{
    
            const{name, value} = e.target;
                if(name === "taskName"){
                    setTaskName(value);
                }else{
                    setDescription(value);
                }
    
            }
    
            // FUNCTION handleSave
            const handleSave = ()=>{
                let taskObject ={}
               
                taskObject.Name = taskName;
                taskObject.Description = description;
                save(taskObject);
                // console.log(taskObject)
            }
    

  return (
<div>
    <Modal
        isOpen={modal}
        toggle={toggle}
        // animation={false}
    >
        <ModalHeader toggle={toggle}>
             Create Task
        </ModalHeader>
        <ModalBody>
            <form>

                <div className='form-group'>
                    <label>Task Name</label>
                    <input type="text" className='form-control' name="taskName" value ={taskName} onChange ={handleChange}/>
                </div>

                <div className='form-group mt-4'>
                    <label>Description</label>
                    <textarea className='form-control' name="description" value={description} onChange ={handleChange}/>
                </div>

            </form>
        </ModalBody>
        <ModalFooter>

       // BUTTON which is associate with FUNCTION handleSave
            <Button
                color="primary"
                onClick={handleSave}
            >
                Create
            </Button>
            {' '}
            <Button onClick={toggle}>
                Cancel
            </Button>
        </ModalFooter>
    </Modal>
</div>
  )
}

export default CreateTask