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

Question

我正在学习 react native，我正在做一个小应用程序，用于记录每天的睡眠时间。我正在使用useEffect（）来触发屏幕上显示的值的一些修改，其中之一是我在其中更新的平均时间useEffect：average()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: 02. lenght: 1lenght: 02. lenght: 0lenght: 12. lenght: 1为什么数组在添加时不更新？

Answer 1

我假设是useState Hook，它的价值是registSleepsetNewRegist

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

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

setNewRegist( ... update registSleep)

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

然而，即使它及时完成，registSleep已经设置为固定值，因此它不会更改，除非重新呈现组件（这是setState所做的），以触发组件重新呈现。

Answer 2

//I am considering this

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

setNewRegist是异步函数，因此在下一个语句将首先执行，因此它不会更新。console.logregistSleep

那么如何检查正确呢？

Tada.... !!!您可以通过以下方式检查其每次更新：registSleepuseEffect

useEffect(() => {

   // Here you can get updated length

   // as soon as registSleep updates

   console.log(registSleep.length); 

},[registSleep]) // <-- watch for any update on `registSleep`