如何正确调用执行Zustand Store函数？解决setSquareFeet调用报错问题

错误根源 #

你现在的问题出在两个地方：

1. setSquareFeet()是用来更新Store里的squareFeet值的函数，它本身没有返回值，直接把它的调用结果传给Result组件的number属性，相当于传了undefined，自然会触发Cannot read properties of undefined (reading 'toLocaleString')错误。
2. 移除toLocaleString后，每次组件渲染都会调用setSquareFeet()，导致Store更新→组件重新渲染→再次调用setSquareFeet()的无限循环，最终浏览器崩溃。

正确实现方案 #

根据你的需求，有两种常用的解决方式：

方案一：自动计算（推荐）

不需要手动调用setSquareFeet，让平方英尺的值自动跟随宽、长、高的变化更新：

修改Store.tsx：

import { create } from 'zustand';

interface CalcStoreState {
  width: number;
  length: number;
  height: number;
  setWidth: (value: number) => void;
  setLength: (value: number) => void;
  setHeight: (value: number) => void;
}

const useCalcSquareFeetStore = create<CalcStoreState>((set) => ({
  width: 0,
  length: 0,
  height: 0,
  setWidth: (value) => set({ width: value }),
  setLength: (value) => set({ length: value }),
  setHeight: (value) => set({ height: value }),
}));

// 派生计算平方英尺，不需要存在Store里，用自定义hook获取
export const useSquareFeet = () => {
  const { width, length, height } = useCalcSquareFeetStore();
  return width * length * height;
};

export default useCalcSquareFeetStore;

修改SquareFeet组件：

import { useSquareFeet } from './Store';

// ...
const squareFeet = useSquareFeet();

<Result
  heading="Number of square feet"
  number={squareFeet}
/>

方案二：手动触发计算

如果需要用户主动触发（比如点击按钮计算），保留setSquareFeet函数，调整调用时机：

Store.tsx保持你原来的代码不变，修改SquareFeet组件：

import useCalcSquareFeetStore from './Store';

const SquareFeet = () => {
  const { squareFeet, setSquareFeet } = useCalcSquareFeetStore();

  // 只在用户操作时调用，比如点击按钮
  const handleCalculate = () => {
    setSquareFeet();
  };

  return (
    <>
      <button onClick={handleCalculate}>计算平方英尺</button>
      <Result
        heading="Number of square feet"
        number={squareFeet}
      />
    </>
  );
};

Result组件优化（可选） #

为了避免类似错误，可以给number加个默认值或者空值判断：

export const Result: React.FC<Props> = ({ heading, number = 0 }) => {
  return (
    <div className="result">
      <h4 className="heading">{heading}</h4>
      <h4 className="number">{number.toLocaleString()}</h4>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者jrad09