如何正确调用和执行Zustand存储中的函数？

Question

我在 Store.tsx 组件中编写了一个函数，该函数根据宽度、长度和高度计算房间的平方英尺。使用此组件更新我的商店文件后，出现以下错误：

"Uncaught TypeError: Cannot read properties of undefined (reading 'toLocaleString')"

尝试从下面的结果组件中删除

toLocaleString

，但随后浏览器崩溃了。我认为我在下面的结果组件中不正确地调用了

setSquareFeet

，这可能会导致崩溃。

如何在结果组件中正确调用和执行商店的

setSquareFeet

函数？

店铺：

const useCalcSquareFeetStore = create<useCalcSquareFeet>((set: any) => ({
  width: 0,
  length: 0,
  height: 0,
  squareFeet: 0,
  setWidth: (value) => set({ width: value }),
  setLength: (value) => set({ length: value }),
  setHeight: (value) => set({ height: value }),
  setSquareFeet: () => { // this is the function I'd like to make work
    set((state: any) => ({
      squareFeet: state.width * state.length * state.height,
    }));
  },
}));

export default useCalcSquareFeetStore;

SquareFeet 组件：

<Result
  heading="Number of square feet"
  number={setSquareFeet()} // Use the function from the store
/>

结果组件：

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

Answer 1

我认为你需要做这样的事情

const YourComponent = () => {
  const { setSquareFeet } = useCalcSquareFeetStore();
  // or u can use this
  // const setSquareFeet = useCalcSquareFeetStore(state=>state.setSquareFeet);


  return (
    <>
      <Result
        heading="Number of square feet"
        number={setSquareFeet()} // call your function here
      />
    </>
  )
};

export default YourComponent;