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

Question

我是 React js 的新手，我正在尝试创建一个待办事项列表应用程序。

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

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

这是我的代码。

TodoList 函数组件

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

这是CreateTask函数组件

    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

Answer 1

将 saveTask 更改为：

const saveTask = function (taskOBJ){

    setTaskList([...taskList, taskOBJ]);
    setModal(false);

}

Answer 2

你的待办事项没有呈现，因为你没有从迭代数组返回任何东西，

{taskList.map((list)=> {
  <li>{list.Name}</li>
})}

// Should be
{taskList.map((list)=> {
  return <li>{list.Name}</li>
})}

// Or 
{taskList.map((list)=> <li>{list.Name}</li>)}

此外，您的 saveTask 应该像这样管理状态，

const saveTask = function (taskOBJ) {
  // Since your state is an array, 
  // you can't spread the current state array into the updating function. 
  // setTaskList(...taskList, arr)

  // Here you take the `prev` state, and return a new array that
  // contains a spread of `prev` and the new task.
  setTaskList((prev) => [...prev, taskOBJ]);
  setModal(false);

  // Another way of achieving the same could be
  const newTaskList = [...taskList, taskObj];
  setTaskList(newTaskList);
  setModal(false);
};

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

update the state in React JS array using useSatate

javascript

reactjs

use-state