Question

我正在使用状态变量来跟踪我以前的状态。

动画有效（没有索引），但是当我这样做时

const [index, setIndex] = useState(0)

useEffect(() => {
        animation.addListener((scroll) => {
            setTimeout(function() {
                let position = Math.floor(scroll.value / cardWidth + 0.75);
                if (position >= restaurants.length - 1) position = restaurants.length - 1;
                if (position <= 0) position = 0;

                console.log("position: ", position, "index: ", index)

                if (index !== position) {
                    setIndex(position);
                    const { coordinate } = restaurants[position];
                    mapRef.current.animateCamera({
                        center: {
                            latitude: coordinate.latitude,
                            longitude: coordinate.longitude,
                        },
                         altitude: 2000, // zooms in when viewing specific location
                    }, {duration: 1000}) // not sure if duration is actually doing anything
                }
            }, 3000);
        });
        return function cleanUp(): void { animation.removeAllListeners(); }
    }, []);

索引永远不会更新。我试过检查 setState 函数中的 prevState 并进行更新，但是如果我在 setIndex 之外打印索引 - 它不会更新。我该如何解决这个问题？

控制台输出

position:  1 index:  0
position:  1 index:  0
position:  1 index:  0
position:  0 index:  0
position:  0 index:  0
position:  0 index:  0
position:  1 index:  0
position:  1 index:  0
position:  1 index:  0
position:  2 index:  0
position:  2 index:  0
position:  2 index:  0

EDIT：将代码更改为 stores[position] 而不是 stores[index] 并添加了对 UseEffect

的清理

Answer 1

我想，你应该再检查一下钩子的规则

[规则的钩子][1] [1]：https://reactjs.org/docs/hooks-rules.html

Answer 2

React 的 setState 是异步的，因此 index 的值将在此函数执行完成后发生变化。所以这里更好的选择是在当前代码中使用 stores[position]。

另一个注意，React 的 state 应该用于渲染中使用的数据（例如，显示在某处）。如果仅在您发布的代码中使用局部变量，则仅使用局部变量完全没问题。

要记住的另一件事：不要忘记在不再需要侦听器时将其删除。例如，当元素从页面上卸载时。要使用 useEffect 执行此操作，您需要返回一个执行此操作的函数。

setState 不更新状态变量 - React Native hooks

2 个答案: