React租车系统计算总价时input中totalPrice返回NaN求助

核心原因 #

• useState初始值仅执行一次：input状态的初始值是组件首次渲染时的days和tPrice，后续用户选择新日期、或异步加载的data更新后，days/tPrice会变化，但input状态不会自动同步新值。
• 异步数据加载时序问题：如果data是从MongoDB异步获取的，组件首次渲染时data.price可能还未就绪（比如为undefined），此时计算的tPrice为NaN；即使后续data加载完成，input仍保留初始的NaN值。

解决方案 #

方案1：用useEffect监听依赖更新input状态 #

将input改为可更新的状态，通过useEffect监听days、tPrice、start、end的变化，实时同步最新值：

// 初始化时保留初始值，同时获取setter
const [input, setInput] = useState({
  totalDays: days,
  totalPrice: tPrice,
  pickUpDate: start,
  dropOffDate: end,
});

// 监听依赖变化，更新input
useEffect(() => {
  setInput({
    totalDays: days,
    totalPrice: tPrice,
    pickUpDate: start,
    dropOffDate: end,
  });
}, [days, tPrice, start, end]); // 当这些依赖项变化时触发更新

方案2：无需维护input状态，提交时实时计算 #

如果input仅用于向Booking模型插入数据，不需要作为组件状态维护，直接在提交逻辑中实时生成即可，避免状态不同步问题：

// 提交函数示例
const handleBookingSubmit = async () => {
  // 实时计算最新的input数据
  const submitData = {
    totalDays: days,
    totalPrice: days * Number(data.price), // 显式转换为数字，避免类型问题
    pickUpDate: start,
    dropOffDate: end,
  };
  
  // 执行插入MongoDB的操作
  // await bookingModel.create(submitData);
};

额外验证：确保data.price为数字类型 #

即使MongoDB模型定义price为Number，前端获取数据时可能因序列化问题变为字符串，可显式转换确保类型正确：

const tPrice = days * Number(data.price);

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