React useEffect 不会阻止重新渲染

Question

我需要创建一个功能性的 React 组件，在每次发生特定事件时自动更新内部数据。

我写了下面的代码，但每次调用回调时，组件都会重新渲染，并且变量 myArray 被设置为空数组，而不是用回调中的所有内容填充。

我做错了什么？我应该使用什么方法？

// event emulation
function onEventEmulator(callback, interval = 1000) {
    setInterval(() => callback('content'), interval);
}

function PollingComponent(props) {
    const [myArray, setMyArray] = useState([]);
    useEffect(() => {
        onEventEmulator(content => {
            setMyArray([...myArray, content]);
        });
    }, []); // with or without passing the empty array as second param, result does not change.
    return <ul>
        <li>Callback</li>
        <li>{myArray.length}</li>
    </ul>;
}

Answer 1

让我们试试这个：

function onEventEmulator(callback, interval = 1000) {
  setInterval(() => callback("content"), interval);
}

然后：

function PollingComponent(props) {
  const [myArray, setMyArray] = useState([]);

  useEffect(() => {
    onEventEmulator(content => {
      setMyArray(arr => [...arr, ...content]);
    });
  }, []);

  return (
    <ul>
      <li>Callback</li>
      <li>{myArray.length}</li>
    </ul>
  );
}

这里缺少的一件事是清除 setInterval 的方法，但我想这不是您关心的问题。

React useEffect 不会阻止重新渲染

React useEffect doesn't block the re-render

javascript

reactjs

use-effect

use-state