Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - React hook useEffect 永远/无限循环持续运行

In lại Tác giả: Hồ Xil 更新时间：2023-11-01 01:16:56 27 4
mua khóa gpt4 Nike

我正在试用新的 React Hookscủa useEffect API，它似乎永远在无限循环中运行!我只希望 useEffect 中的回调运行一次。这是我的引用代码:

单击“运行代码片段”以查看“运行 useEffect”字符串被无限地打印到控制台。

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('Run useEffect');
    setCount(100);
  });

  return (
    

      
Count: {count}

    

  );
}

ReactDOM.render(, document.querySelector('#app'));



câu trả lời hay nhất

发生这种情况是因为 useEffect 在每次渲染后都会被触发，在这种情况下，函数组件会调用 Counter() 函数。当您在 useEffect 中执行从 useState 返回的 setX 调用时，React 将再次渲染该组件，并且 useEffect将再次运行。这会导致无限循环:

Counter() → useEffect() → setCount() → Counter() → useEffect() → ...(循环)

要让您的 useEffect 只运行一次，请传递一个空数组 [] 作为第二个参数，如下面修改后的代码片段所示。

第二个参数的目的是在数组参数中的任何值发生变化时告诉 React:

useEffect(() => {
  setCount(100);
}, [count]); // Only re-run the effect if count changes

您可以将任意数量的值传递到数组中，useEffect 只会在任何一个值发生变化时运行。通过传入一个空数组，我们告诉 React 不要跟踪任何更改，只运行一次，有效地模拟 componentDidMount.

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('Run useEffect');
    setCount(100);
  }, []);

  return (
    

      
Count: {count}

    

  );
}

ReactDOM.render(, document.querySelector('#app'));



阅读更多关于 useEffect 的信息.

关于javascript - React hook useEffect 永远/无限循环持续运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53243203/

27 4 0
Bài viết khuyến nghị: javascript - 在 Javascript 中实现优先级队列的有效方法？
Bài viết khuyến nghị: java - 如果哈希集中只有一个元素，我怎样才能把它取出来？
Bài viết khuyến nghị: java - JMH 中 hs_gc 分析器计数器的含义
Bài viết khuyến nghị: 用于删除给定域内所有 cookie 的 JavaScript 书签
Hồ Xil
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress