Question

好，我正在拔头发。

我正在尝试在上下文中利用useEffect填充屏幕上的列表。


  useEffect(() => {

    Axios.get("http://localhost:8080/getItems").then((response) => {
      console.log(response);
      setItems(response.data);
    });
  }, [items]);

这使我每次向数据库添加项目时都可以填充列表。但是，这会在Spring中导致无限循环。

现在，我可以通过将[items]更改为[]来终止无限循环。但是，当我添加到数据库中时，它不再在屏幕上呈现更改。

有人知道该问题的解决方法吗？确切地说，我仍然想对数据库进行更新，而不会产生无限循环

Answer 1

如果您更新数据库，并且不执行获取更改的请求，那么您将不会在前端收到更改。

有几种实现这一目标的机制：

拉动（您每执行X次请求更改的时间）
在执行新更改时，将您的后端通知前端。

拉机械是您称之为无限循环的一种。

推送机制，例如，您需要使用websocket或socket.io之类的库来执行它。

Answer 2

首先，您更改将触发useEffect的items数组，在获取项目后，再次对其进行更改，然后再次触发useEffect。这就是为什么会出现无尽循环的原因。

您可以尝试执行以下操作：

const [isLoaded, setIsLoaded] = useState(false);

const pushItem = (item) => { // Place where you add new item.
    setItems([...items, item]);
    setIsLoaded(false);
};

useEffect(() => {
    if (isLoaded) {
        return;
    }
    Axios.get("http://localhost:8080/getItems").then((response) => {
        setItems(response.data);
        setIsLoaded(true);
    });
}, [items, isLoaded]);

在使用useEffect时在React中使用上下文

2 个答案: