如何更新使用函数的全局状态

Question

问题

我正在开发一个网络应用程序功能，可以计算特定区域的隔热系数。您可以在此处查看live Codesandbox 示例（这是第二个黄色区域）。

我面临的问题是，当用户选择室外和室内温度值时，差异会从 Zustand 商店正确更新。但是，温差因子结果

difference / 24

不会更新。我已经在下面的代码中写了

setResult

。

我可以在控制台日志中看到温差因子的状态没有更新，即使我已经设置了它。但我可能做错了什么，因为它的状态应该是动态自动更新的。我该如何解决这个问题？

Zustand 全球商店：

const useTempDiffFactorStore = create<useTempDiffFactor>(
  zukeeper((set: any, get: any) => ({
    outdoorTemp: 0,
    indoorTemp: 0,
    difference: 0,
    result: 0,
    setOutdoorTemp: (value: any) =>
      set({ outdoorTemp: value, difference: value - get().indoorTemp }),
    setIndoorTemp: (value: any) =>
      set({ indoorTemp: value, difference: value - get().outdoorTemp }),
    setDifference: (value: any) =>
      set({ difference: value - get().outdoorTemp - get().indoorTemp }),
    setResult: () => { // this is the function that's not working
      const result = get().difference / 24;
      set({ result: result });
      console.log("Setting result:", result);
    },
  }))
);

export default useTempDiffFactorStore;

温差因子分量：

export const TempDiffFactor = () => {
  const {
    outdoorTemp,
    indoorTemp,
    difference,
    result,
    setOutdoorTemp,
    setIndoorTemp,
  } = useTempDiffFactorStore();

  ...

  console.log("Result", result);

  return (
    <>
      <section className="temp-diff-factor">
        ...
          <Col lg="3" className="d-flex align-items-center">
            <Result
              heading="Temperature Difference Factor"
              number={result} // passing it in here
            />
          </Col>
      </section>
    </>
  );
};

Answer 1

通过确保值有效且不是 NaN，您可以防止状态未按预期更新的潜在问题。

如果在这些检查后问题仍然存在，您可能需要提供更多上下文或共享代码的其他部分以进行更深入的分析。

setResult: () => {
  const currentDifference = get().difference;
  const result = currentDifference / 24;
  
  // Ensure that difference is a valid number before updating the state
  if (!isNaN(result)) {
    set({ result });
    console.log("Setting result:", result);
  } else {
    console.error("Invalid result value:", result);
  }
}