React 函数组件的 setState 未更新我的状态

Question

我正在设置签入和签出日期的开始日期和结束日期的状态。我得到 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 (...);

}

Answer 1

setState是异步的。设置状态后立即同步控制台日志记录以查看该状态之后的样子很可能不会反映正确的值。如果您想查看更改时的值total，请尝试以下操作：useEffect(() => {  console.log(total);}, [total]);