React Native useState Hook没有立即更新

Question

我有一个按钮，如果我点击它(它将设置状态为true)，我想将转换值设置为某个数字

const [openShop, setOpenShop] = useState(false);
const [containerHeight, setContainerHeight] = useState('');
const [translateY, setTranslateY] = useState(0);
// ... more code where I set containerHeight
const onShopPress = () => {
setOpenShop(!openShop);
if (openShop) {
setTranslateY(-containerHeight);
} else {
setTranslateY(0);
}
console.log('shopping pressed');
};
<TouchableOpacity style={styles.shopBtn} onPress={onShopPress}>
<Animated.View
style={[styles.shopBtnView, {transform: [{translateY}]}]}>
<Text>Shop</Text>
</Animated.View>
</TouchableOpacity>

现在，我必须按两次按钮才能真正进入openShop块。第一次点击，它会转到else块

Answer 1

因为setState是异步的，所以state只有在组件渲染时才有新的值。所以在本例中可以使用另一个值:

const onShopPress = () => {
const newOpenSop = !openShop
setOpenShop(newOpenSop);
if (newOpenSop) {
setTranslateY(-containerHeight);
} else {
setTranslateY(0);
}
console.log('shopping pressed');
};

或

const onShopPress = () => {
setOpenShop(newOpenSop=>{
setOpenShop(newOpenSop);
if (newOpenSop) {
setTranslateY(-containerHeight);
} else {
setTranslateY(0);
}
});

console.log('shopping pressed');
};

为什么需要这个?

设置状态是一个异步任务，所以所有的更新动作都将进入事件循环，下一个语句将在此语句之前执行。

如果你想了解事件循环，这是一个必看的视频https://www.youtube.com/watch?v=8aGhZQkoFbQ