钩子值没有立即更新.异步const

Question

调用setImage(result.uri);Console.log (image)在应该显示新图像uri时记录为空。有趣的是，错误显示为

TypeError: null不是一个对象(求值'props.route.params.uid')

在调用pickImage之后，即使在调用它之前，它对它进行计算和显示是没有问题的。如果我移除props。navigation。navigate("Save"， image, album);并再次调用pickImage，这次是console.log(image);将显示前面选择的图像的uri。

const [album, setAlbum] = useState("");
const [hasGalleryPermission, setHasGalleryPermission] = useState(null);
const [image, setImage] = useState(null);
useEffect(() => {
setAlbum(props.route.params.uid);
(async () => {
const galleryStatus =
await ImagePicker.requestMediaLibraryPermissionsAsync();
setHasGalleryPermission(galleryStatus.status === "granted");
})();
}, []);
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
console.log(result);
if (!result.cancelled) {
setImage(result.uri);
console.log(result.uri);
console.log(image);
console.log(album);
props.navigation.navigate("Save", image, album);
}

};

Answer 1

一切正常。setState(setImage)是异步的。console.log(图片);第一次返回null，因为setState还没有执行完。在第二次运行console.log时，先前的async setState已经完成，并且仍然期望记录先前的数据，因为它尚未被第二次async setState调用覆盖。

我假设你想表演道具。导航时的图像变化?

• 你可以将setState封装在一个返回promise的函数中，这样你就可以将它的执行await直到数据被解析。
• 你也可以在setState中添加一个回调函数在您的状态被更新后调用。注意，这只适用于类组件。如果您使用的是功能组件，请勾选最后一个选项。

setImage(result.uri, () => props.navigation.navigate("Save", image, album));

• 就我个人而言，我更喜欢在这样的情况下，我想触发一个特定的逻辑时，其他东西的变化。对你来说，我可以挪道具。在useEffect钩子中调用导航函数，当图像发生变化时，依赖项是:

useEffect(() => {props.navigation.navigate("Save", image, album); }, [image])

编辑:这可能是一个重复:如何在react钩子上使用' setState '回调如果没有，这里的一些答案会让你更了解state是如何工作的。