时间戳

首页 > 解决方案 > 反应功能组件的 setState 未更新我的状态

javascript - 反应功能组件的 setState 未更新我的状态

问题描述

我正在为签入和结帐日期的开始日期和结束日期设置状态。我得到了validDateRange，它是一个有效日期和长度的数组。尝试将总状态设置为数组的长度乘以房间的价格，但以某种方式反应不更新我的总状态。totalCost 的日志完全正确


const RoomDetails = (props) => {
    const roomDetails = props.location.state;

    const [startDate, setStartDate] = useState();
    const [startEnd, setEndDate] = useState();
    const [total, setTotal] = useState();


    const handleOnSelectCalendar = (startDate, endDate, validDateRange) => {
        // console.log(startDate, endDate, validDateRange.length);
        setStartDate(startDate);
        setEndDate(endDate);
        // console.log(roomDetails.price, validDateRange.length);
        // var totalCost = roomDetails.price * validDateRange.length;
        setTotal(roomDetails.price * validDateRange.length);
        console.log(startDate, endDate, total); // output: 2020-12-08 2020-12-11 undefined
    };
    return (...);
}

标签： javascriptreactjsstate

解决方案

setState是异步的。在设置状态后立即同步控制台日志以查看该状态之后的样子很可能不会反映正确的值。如果您想在total更改时查看值，请尝试以下操作：

useEffect(() => {
  console.log(total);
}, [total]);

推荐阅读