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])

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

1 个答案: