首次更新后状态更新不起作用

Question

我正在尝试从 useEffect 调用其 setState 方法来更新状态，但它仅在渲染和第一次调用 setState 方法时更新。

const [filterChanged, setFilterChanged] = useState(false);

useEffect(() => {
    console.log('filterChanged UPDATED', filterChanged);
}, [filterChanged]);

useEffect(() => {
    const sessionFilter = sessionStorage.getItem('test-filter');
    if (sessionFilter === props.selectedFilter) {
        console.log('filter not changed');
        setFilterChanged(false);
    } else {
        console.log('filter changed');
        setFilterChanged(true);
    }

    sessionStorage.setItem('test-filter', props.selectedFilter);
}, [props.selectedFilter]);

我离开了 console.logs，因为我可以在控制台中看到

filter changed

消息，但看不到更新的消息。 我知道这是异步的，但是在调用

filterChanged

方法后一段时间，依赖于

setFilterChanged

的 useEffect 也没有被触发。

Answer 1

first useEffect

仅执行两次：第一次当

sessionFilter

为空时，第二次当

setFilterChanged(true)

被调用时。之后，

first useEffect

再次执行。

但是，如果选择相同的类别，

second useEffect

将不会执行，因为其依赖数组中的变量不会改变。这意味着

filterChanged

将保持不变。

您可以写

setFilterChanged(true)

，而不是写

setFilterChanged(!filterChanged)

。

如果过滤器不更改，则

useEffect

钩子都不会执行。