应用父 useState 函数时，useState 不起作用

Question

我有一个票证子类，它在没有票证被更改后设置总金额，我在这里面临的问题是 setNumber 似乎不起作用，除非 setTotal 被注释掉，我不明白这一点，可以使用一些关于这个问题的帮助

const Booking = () => {

    let [total, setTotal] = useState(0)

    const Ticket = ({ ticket, index }: any) => {

        let [number, setNumber] = useState(0);

        const handleChange = (e: any) => {

            const order = {
                eventid: eventid,
                amt: ticket.price * e.target.value,
                type: ticket.type,
                tickets: e.target.value,
                email: userdata!.email,
                ticketid: ticket.ticketid,
            }

            orders[index] = order

            //setNumber doesn't seem to work unless setTotal is commented out
            setNumber(Number(e.target.value))
            console.log(number)

            let sum = orders.reduce((accumulator: number, object: any) => {
                return accumulator + object.amt;
            }, 0)
            setTotal(sum)

        }

我尝试更改将 setTotal 函数作为参数添加到子组件，但它似乎不起作用

Answer 1

在您的情况下，您可以尝试使用

useEffect

。由于异步性质

useStrict

，当你调用setNumber(Number(e.target.value))时，它不会更新状态。 setNumber 之后的 console.log(number) 将记录 number 的前一个值，而不是更新后的值。当您注释掉 setTotal(sum) 时，它似乎有效，因为您不立即依赖

number

的更新值。但是像这样使用

useEffect

：

const Ticket = ({ ticket, index }: any) => {
    let [number, setNumber] = useState(0);

    useEffect(() => {
        console.log(number);

        let sum = orders.reduce((accumulator: number, object: any) => {
            return accumulator + object.amt;
        }, 0);
        setTotal(sum);
    }, [number]);

    const handleChange = (e: any) => {
        const order = {
            eventid: eventid,
            amt: ticket.price * e.target.value,
            type: ticket.type,
            tickets: e.target.value,
            email: userdata!.email,
            ticketid: ticket.ticketid,
        }

        orders[index] = order;

        setNumber(Number(e.target.value));
    }

};