你好，我正在开发一个待办事项列表应用程序使用reactjs与axios。我设法查看，并添加数据到数据库，我现在的问题是，我不知道如何加载更新后的数据后，提交的形式。
这是从数据库中获取所有数据的代码，文件名为FetchData.js

import { useEffect, useState} from 'react';
import axios from 'axios';

const FetchData = () => {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const { data: response } = await axios.get('http://localhost/todolistci/backend/index.php/todos/view', { crossDomain: true });
        setData(response);
      } catch (error) {
        console.error(error);
      }
      setLoading(false);
    };

    fetchData();
  }, []);

  return {
    data,
    loading,
  };
};

export default FetchData;

这是我查看来自FetchData.js的项目列表的方式。文件名为List.js

import React from 'react';
import ListItem from './ListItem'
import FetchData from './FetchData';

function List() {
  const {
    data,
    loading,
  } = FetchData();

  return (
    <ul>
      {loading && <div>Loading</div>}
      {!loading && (
        <>
          {data.map(item => (<ListItem key={item.id} id={item.id} name={item.name} complete={item.complete} />))}
        </>
      )}
    </ul>
  )
}

export default List

现在这是我提交的表单.文件名是FormToDo.js

import React, {useState} from 'react';
import axios from 'axios';

function FormToDo() {
  
    const [formValue, setformValue] = useState({
      name: '',
    });

    const handleSubmit = async(e) => {
      e.preventDefault();
      // store the states in the form data
      const nameFormData = new FormData();
      nameFormData.append("name", formValue.name)
    
      try {
        // make axios post request
        const response = await axios({
          method: "post",
          url: "http://localhost/todolistci/backend/index.php/create",
          data: nameFormData,
          headers: { "Content-Type": "multipart/form-data" },
        });
      } catch(error) {
        console.log(error)
      }

      //empty the text field
      setformValue({name: ''});

      //I need to update the list of data in here
    }
  
    const handleChange = (event) => {
      setformValue({
        ...formValue,
        [event.target.name]: event.target.value
      });
    }

  return (
    <div>
        <form  onSubmit={handleSubmit}>
            <input type="text" name="name" id="name" required placeholder="Enter To Do" 
            value={formValue.name} onChange={handleChange} onKeyDown={handleChange} />
            <button type="submit">+</button>
        </form>
    </div>
  )
}

export default FormToDo

这是我正在制作的todo应用程序的图像。enter image description here
帮帮我。谢谢。