React/javascript对数组的添加不改变数组长度[重复]

Question

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

我正在使用useEffect（）来触发对屏幕上显示的值的一些修改，其中之一是我在useEffect内部更新的平均时间avere():

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]);

为了调试，如您所见，在向寄存器数组setNewRegist(...)添加新值之前，我先打印控制台lenght。据我所知，应该打印lenght:0然后打印2。lengt:1但它会打印lengt:0然后打印2。lengt:0并在下一个触发器上lengt:1然后2。lenght:1。

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

Answer 1

我假设setNewRegist是useState钩子，其中它的值是registSleep

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

它不起作用的两个原因。useState钩子是异步的，对于setstate内部的逻辑，逻辑不会停止。

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

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

Answer 2

//I am considering this
const [ registSleep , setNewRegist ] = useState([])

setNewRegist是异步函数，因此在您的情况下，下一个状态将首先执行console.log，因此它不会更新RegistSleep。

那么如何检查对不对呢？

塔达...！！！您可以通过useeffect检查registsleep的每次更新，如下所示：

useEffect(() => {
   // Here you can get updated length
   // as soon as registSleep updates
   console.log(registSleep.length); 
},[registSleep]) // <-- watch for any update on `registSleep`