中从json服务器更新数据。

Question

我试图在react中更新JSON服务器上的数据，但它没有更新它。

以下是整个代码：

import { useState, useEffect } from "react";

const EditTask = ({ task, onEdit }) => {
  const [tasks, setTasks] = useState([]);

    useEffect(() => {
        const getTasks = async () => {
          const tasksfromServer = await fetchTasks();
          setTasks(tasksfromServer);
        };
    
        getTasks();
      }, []);

        // Fetch Tasks
        const fetchTasks = async () => {
            const res = await fetch("http://localhost:5000/tasks");
            const data = await res.json();

            return data;
        };

    // Fetch Task
    const fetchTask = async (id) => {
        const res = await fetch(`http://localhost:5000/tasks/${id}`);
        const data = await res.json();

        return data;
    };

     // Edit Task
    const editTask = async (event, id) => {
      event.preventDefault()
        const taskToEdit = await fetchTask(id)
        const updateTask = { ...taskToEdit, text: event.target.text, day: event.day }

        const res = await fetch(`http://localhost:5000/tasks/${id}`, {
            method: "PUT",
            headers: {
                "Content-type": "application/json"
            },
            body: JSON.stringify(updateTask)
        })

        const data = await res.json();

        setTasks(tasks.map((task) => task.id === id ? { ...task, text: data.text, day: data.day } : task))
    }

  return (
    <form className="add-form" onSubmit={(e) => editTask(e, task.id)}>
    <div className="form-control">
      <label>Task</label>
      <input
        type="text"
        placeholder="Add Task"
        defaultValue={task.text}
      />
    </div>
    <div className="form-control">
      <label>Day & Time</label>
      <input
        type="text"
        placeholder="Add Day & Time"
        defaultValue={task.day}
      />
    </div>

    <input type="submit" value="Edit Task" className="btn btn-block" />
  </form>
  )
}

export default EditTask

我做错了什么，因为我试着以不同的方式更新它，但它仍然不起作用。但是如果我从react工具中更新它，它就会完美地工作。我已经做了两天了，但还是没明白。

Answer 1

您应该指定一个单独的updatedTask状态来存储更新的任务，并编辑表单，以便在输入和名称属性中包含onChange事件：

import { useState, useEffect } from 'react';

const EditTask = ({ task, onEdit }) => {
  const [updatedTask, setUpdatedTask] = useState(task);

  const handleOnChange = (e) => {
    setUpdatedTask((oldTask) => {
      return {
        ...oldTask,
        [e.target.name]: e.target.value,
      };
    });
  };

  const editTask = async (event) => {
    event.preventDefault();

    try {
      await fetch(`http://localhost:5000/tasks/${updatedTask.id}`, {
        method: 'PUT',
        headers: {
          'Content-type': 'application/json',
        },
        body: JSON.stringify(updatedTask),
      });
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <form className='add-form' onSubmit={editTask}>
      <div className='form-control'>
        <label>Task</label>
        <input
          type='text'
          name='text'
          placeholder='Add Task'
          value={updatedTask.text}
          onChange={handleOnChange}
        />
      </div>
      <div className='form-control'>
        <label>Day & Time</label>
        <input
          type='text'
          placeholder='Add Day & Time'
          name='day'
          value={updatedTask.day}
          onChange={handleOnChange}
        />
      </div>

      <input type='submit' value='Edit Task' className='btn btn-block' />
    </form>
  );
};

export default EditTask;