为什么即使在 prop 对象更改后功能组件也不会重新渲染？

Question

我有一个对象构造函数，它有修改值的方法。我在反应组件中创建了该对象的新实例，并在子组件中呈现该计数器。当我从子对象调用方法时，它在对象中得到更新，但新更新的值没有重新呈现。我尝试使用 useEffect 来监听 props 的变化，但它在值更新时被调用。但是当我更改子组件中的状态时，会显示更新的值。问题是什么？

function Core() {
  this.counter = 0;
}

Core.prototype.handleCounter = function(options) {
  this.counter = this.counter + 1;
  console.log(this.counter);
};

export default function App() {
  let core = new Core();
  return (
    <div className="App">
      <Status counter={core.counter} core={core} />
    </div>
  );
}

应用程序.js

 import React, { useEffect } from "react";
import "./styles.css";

export default function Status({ core, counter }) {
  const [localState, setLocal] = React.useState(false);
  function handleButton() {
    core.handleCounter();
    console.log(core.counter);
  }
  return (
    <div>
      <span> counter is {core.counter}</span>
      <button onClick={() => handleButton()}>update object</button>
      <button
        onClick={() => {
          setLocal(!localState);
        }}
      >
        toggle localState
      </button>
    </div>
  );
}

状态.js

这是一个代码沙箱网址： https ://codesandbox.io/s/quizzical-bash-qh8mn

原文由 n9n 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React 不知道 Core 是如何工作的；它看到一个变量 let core = new Core(); 一旦创建就永远不会改变，所以 React 永远不知道什么时候更新。

看起来您正开始使用 Core 构建中央存储，因此您可能需要查看 useReducer 来处理您不断增长的用例：

 const initialState = {
  counter: 0;
};

function reducer(state, action) {
  switch (action.type) {
    case "handleCounter":
      return {
        ...state,
        counter: state.counter + 1,
      };
    default:
      return state;
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  function handleCounter() {
    dispatch("handleCounter");
  }

  return (
    <div className="App">
      <Status counter={state.counter} handleCounter={handleCounter} />
    </div>
  );
}

原文由 Ross Allen 发布，翻译遵循 CC BY-SA 4.0 许可协议