如何阻止 useEffect 每次都重新加载我的页面？

Question

由于某种原因，我的整个页面在每次从数据库获取状态后更新状态时都会重新加载。页面闪烁，我最终到达页面顶部。这是为什么呢？

我在 sort() 等其他函数中更新整个状态，无需重新加载即可完美运行。我已经将 event.preventDefault() 放在每个点击处理程序中，所以这不应该是问题。

使用 React 的一大好处是无需重新加载即可获得流畅的 UI，因此这很烦人。

function App() {
  const [contacts, setContacts] = useState({ items: [] });

  useEffect(() => {
    axios
      .get('http://localhost:5000/')
      .then((result) => {       
        setContacts({ items: result.data });
      })
      .catch((err) => console.log(err));
  }, []);

这是被调用的函数：

const handleSubmit = (event) => {
    event.preventDefault();

    if (!id) {
      axios
        .post('http://localhost:5000/add/', input)
        .then(() => {
          setInput(emptyState);
        })
        .catch((err) => console.log(err));
    } else {
      axios
        .post(`http://localhost:5000/update/${id}`, input)
        .then(() => {
          props.updateContact(input);
          setInput(emptyState);
        })
        .catch((err) => console.log(err));
    }
    window.location = '/';
  };

Answer 1

您需要在 [] 中添加一些内容。 您可以看到我们在第二个参数中将 props.name 传递到了数组中。现在，当名称更改时，这将导致效果始终再次运行。 如果你不传递任何东西，它会一直更新并且毫无用处。

  useEffect(() => {
    document.title = `Page of ${props.name}`
  }, [props.name])