SetState 无法正常工作 React Native答案

【问题标题】：SetState doesn't work properly React NativeSetState 无法正常工作 React Native
【发布时间】：2021-10-01 00:36:13
【问题描述】：

我目前有以下代码：

const uploadImage = async () => {
    console.log('Hello2');
    console.log(media.length);
    for (var i = 0; i < media.length; i++) {
      const image = media[i];
      const uri = image.source;
      const response = await fetch(uri);
      const blob = await response.blob();
   
      const storageRef = storage
        .ref()
        .child(`listing/${auth.currentUser.uid}/${Math.random().toString(36)}`);
      const task = await storageRef.put(blob);
      const downloadUrl = await task.ref.getDownloadURL();
      console.log('download URL is:');
      console.log(downloadURL);
      setUrls([...urls, downloadURL]);
      console.log('url added');
      console.log(urls.length);
    }
    console.log('Process finished');
    console.log(urls.length);
    if (urls.length == media.length) {
      alert('All images uploaded');
    }
  };

在这个函数中，我实际上是在尝试填充我的“urls”数组，但是无论何时我运行代码，它似乎都没有填充 urls 数组。在控制台记录所有内容后，问题不在于 downloadURL，因为我得到了一个有效的值，但不知何故，没有任何东西被添加到 urls 数组中。

我在下面使用了类似的代码来填充“媒体”数组，并且似乎对此没有任何问题，这就是为什么我不知道为什么 setURLs 的代码不起作用的原因。任何帮助将不胜感激！

 const openLibrary = async () => {
    const {status} = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') {
      alert('Sorry, we need camera roll permissions to make this work!');
    }
    const image = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });
    console.log(image);
    // console.log('Media length is: ' + `${media.length().toString()}`);
    if (!image.cancelled) {
      // console.log('Media length is: ' + media.length());
      console.log('Hello');
      setMedia([...media, {source: image.uri, type: image.type}]);
    }
  };

【问题讨论】：

标签： javascript react-native react-hooks firebase-storage use-state

【解决方案1】：

setState() 并不总是立即更新。

试试这个

//variable To Save Data Immediately.
const urlArray = [];

for (var i = 0; i < media.length; i++) {
    urlArray.push(yourDownloadUrl)
}

setUrls(urlArray);

doc 这么说

setState() 并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用 setState() 之后立即读取 this.state 是一个潜在的陷阱。相反，使用 componentDidUpdate 或 setState 回调 (setState(updater, callback))，它们都保证在应用更新后触发。如果您需要根据之前的状态设置状态，请阅读下面的 updater 参数。

【讨论】：