时间戳

首页 > 解决方案 > React / javascript添加到数组不改变数组长度

javascript - React / javascript添加到数组不改变数组长度

问题描述

我正在学习本机反应，我正在做一个小应用程序来记录每天的睡眠时间。

我正在使用 useEffect() 来触发屏幕上显示的值的一些修改，其中之一是average()我在 useEffect 中更新的平均时间：

const [updateAction, setUpdateAction] = useState(false);

useEffect(() => {
        console.log("lenght:" + registSleep.length);
        var registed = false;
        if (!isNaN(enteredHours)) {
            for (var i = 0; i < registSleep.length; i++) {
                if (
                    registSleep[i].day === selectedDay &&
                    registSleep[i].month === selectedMonth &&
                    registSleep[i].year === selectedYear
                ) {
                    registed = true;
                    registSleep[i].hours = enteredHours;
                }
            }
            if (!registed) {
                var newReg = {
                    day: selectedDay,
                    month: selectedMonth,
                    year: selectedYear,
                    hours: enteredHours,
                };
                setNewRegist((prevReg) => [
                    ...prevReg,
                    newReg,
                ]); 
            }
            if (registSleep.length != 0) {
                average();
            }       
        }
        console.log("2. lenght:" + registSleep.length);
        setviewInfoAction(!viewInfoAction);
    }, [updateAction]);

要进行调试，如您所见，我在向 regists 数组添加新值之前打印以控制长度，setNewRegist(...)据我所知，它应该打印lenght: 0然后2. lenght: 1，而是在下一个触发器时打印lenght: 0然后然后。2. lenght: 0lenght: 12. lenght: 1

为什么数组在添加时不更新？

标签： javascriptreactjsreact-native

解决方案

我假设setNewRegist是 useState Hook，它的值是 registSleep

const [registSleep, setNewRegist] = useState([ ... ])

它不起作用的两个原因。useState Hook 是异步的，setState 内部的逻辑不会停止。

setNewRegist( ... update registSleep)
console.log(registSleep) // will run before setState finishes

然而，即使它确实及时完成，registSleep 已经设置为固定值，因此除非组件被重新渲染，否则它不会改变，这就是 setState 所做的，以触发组件重新渲染。

推荐阅读