我正在做一个简单的项目接收输入并将输入数据添加到数据库中。
下面是我的代码：

const [dataFromDB, setDataFromDB] = useState(null);

  const fetchDataFromDB = async () => {
    try {
      const response = await fetch(url);
      const data = await response.json();
      setDataFromDB(data);
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchDataFromDB();
  }, []);

  const addTextToDB = async (text) => {
    try {
      await fetch('http://localhost:3001/api/codes', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          text: text,
        }),
      });
    } catch (error) {
      console.error(error);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const input = e.target.elements.name.value;
    addTextToDB(input);
    e.target.reset();
    fetchDataFromDB();
    setDataFromDB(dataFromDB);
    console.log(dataFromDB);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
        <input type="submit" value="ADD" />
      </form>
      <div>
        {dataFromDB &&
          dataFromDB.map((item) => <Item key={item._id} name={item.text} />)}
      </div>
    </div>
  );
}

首先，我获取数据以向用户显示数据库，然后当用户按下按钮输入的值将添加到数据库中。但要查看更改，我需要刷新页面或添加两个或更多的输入。
我不知道问题出在哪里，在提交数据后，我再次获取数据以接收来自数据库的更新响应，然后更新setDataFromDB的状态以查看更改。