mongodb 我必须刷新页面才能看到REACTJS中的更改

fivyi3re  于 2023-03-01  发布在  Go
关注(0)|答案(1)|浏览(101)

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

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的状态以查看更改。

ego6inou

ego6inou1#

handleSubmit函数中,您调用fetchDataFromDB函数,然后立即将setDataFromDB的状态设置为dataFromDB的当前值。这是不必要的,因为您已经在fetchDataFromDB函数中更新了dataFromDB的状态。
此外,当您像这样依次调用addTextToDBfetchDataFromDB时,它们将同时开始执行并并发运行,这取决于这些函数的相对速度和服务器响应时间。fetchDataFromDB可能在addTextToDB完成向数据库添加新数据之前执行并更新dataFromDB的状态。在调用fetchDataFromDB从服务器获取最新数据之前,应确保addTextToDB已完全完成并且数据库已更新。

const handleSubmit = async (e) => {
  ...
  await addTextToDB(input);
  ...
  await fetchDataFromDB();
}

相关问题