Javascript 已在EventListener中更新更改异步的React.js状态对象，但不会导致组件重新呈现

在Reaction中，只有一种方法可以引发重现:您必须调用setState.此外，您传递给setState的值必须是一个新值(由Object.is判断标识，类似于===).因此，如果状态是对象，则需要将其设置为新对象，而不是改变旧对象.

理想情况下，这个外部库可以通过某种方式告诉您它何时进行了更改，然后您可以对其执行操作以调用setState.类似于以下内容(我正在发明外部库代码):

const [counter, setCounter] = useState(0);
useEffect(() => {
  const unsubscribe = externalLibrary.onChange((newValue) => {
    setCounter(newValue);
  });
  return unsubscribe
}, []);

如果图书馆没有办法告诉你什么时候发生了变化，你就得有创意了.如果库正在写入对象的属性，也许您可以使用setter函数创建一个对象，并将其用作通知的一种方式.

const [counter, setCounter] = useState(0);
useEffect(() => {
  const interceptor = {
    _counter: 0;
    get counter() {
      return this._counter;
    },
    set counter(newValue) {
      this._counter = newValue;
      setCounter(newValue);
    }
  }
  externalLibraryEventListener(interceptor);
}, []);

您的代码有一个带有setTimeout的注释位.这也可能是一种 Select :轮询更改，然后设置状态.我不认为这是最好的解决方案，因为它会在您注意到更改之前引入延迟，并且您会遇到这样的情况:您确实在判断更改，但什么都没有发生.

const [counter, setCounter] = useState(0);
useEffect(() => {
  const myObj = { counter: 0 }
  externalLibraryEventListener(myObj);

  let prevValue = 0;
  const id = setInterval(() => {
     if (myObj.counter !== prevValue) {
       setCounter(myObj.counter);
       prevValue = myObject.counter;
     }
  }, 500);

  return () => clearInterval(id);
}, []);

在我的示例中，我故意将状态更改为数字而不是对象.如果出于某种原因需要将其作为对象保留，请记住，每次设置状态时都必须创建一个新对象.变异相同的对象将看起来好像什么都没有改变.因此，如果您需要使用该对象设置状态，请确保首先复制它

setState({ ...stateWhichWasMutated });