从另一个“UseEffect”“调用”UseEffect

Question

我正在学习本机反应，并且正在编写一个简单的应用程序来记录每天的睡眠时间。

当按下添加新寄存器的按钮时，我会这样做

onPress={() => setUpdateAction(true)}

这改变了 updateAction 的值：

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

当 updateAction 的值改变时，这将被执行：

useEffect(() => {

    ... code that add's the register to an array

    setviewInfoAction(true);
    setUpdateAction(false);
}, [updateAction]);

在里面我调用setviewInfoAction(true); 因为我想更改显示的值和插入的值。

const [viewInfoAction, setviewInfoAction] = useState(false);


useEffect(() => {
        console.log("CALLED");
        var seted = false;
        for (var i = 0; i < registSleep.length; i++) {
            if (
                registSleep[i].day === selectedDay &&
                registSleep[i].month === selectedMonth &&
                registSleep[i].year === selectedYear
            ) {
                setSelectedDayHours(registSleep[i].hours);
                seted = true;
            }
        }
        if (!seted) {
            setSelectedDayHours(0);
        }
        setviewInfoAction(false);
    }, [viewInfoAction]);

这样做我期待第二个 UseEffect 被执行，但它不是......

Answer 1

您设置 useEffect 的方式只会在selectedDay更改时重新运行。 如果你想让它在执行setInfoViewAction时运行，请将viewInfoAction添加到依赖项中。

更好的是，所有这些都是与同一个副作用相关的逻辑。 我会通过删除第二个useEffect并将其中的代码添加到第一个useEffect来简化您的代码。 这主要是因为您可以将所有相关的副作用逻辑放在一起。