javascript - 声明变量比 setState 更快

Question

我和我的团队正在开发一个显示个人资料图片和个人简介的个人资料页面。我们使用 expo-image-picker 库让用户选择他们想要的图像并在应用程序上显示图像。我还想将图像上传到 s3，其中将存储员工的图像。我现在面临的问题是 params.ImageUri 给我的是本地文件而不是 s3 链接。这就是我的函数的样子。

我有一个 selectImage() 函数，它将触发用户从他们的图库中选择图像。然后数据将存储在 this.state.items[0].imageUrl 中，这是来自 Web API 的数据。调用该函数后，this.state.items[0].imageUrl的值为本地文件。当用户按下其个人资料图片时，将调用此函数。

  selectImage = async () => {

    const cancelImageUrl = this.state.items[0].imageUrl

    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1
    });

    const file = {
      uri: result.uri,
      name: 'IMG_' + Math.random(4000),
      type: 'image/jpg'
    }

    if (!result.cancelled) {
      this.setState({
        items: this.state.items.map((item, i) =>
          i == 0 ?
            { ...item, imageUrl: file.uri } : item),
        file: file
      })
    }
    else {
      this.setState({
        items: this.state.items.map((item, i) =>
          i == 0 ?
            { ...item, imageUrl: cancelImageUrl } : item)
      })
    }
  }

按下“保存”按钮后，我想将图像上传到 s3，将文件保存在云中，以便用户每次打开应用程序时都能够看到该应用程序。在这里，当我记录 items[0].imageUrl 的状态时，它会显示 s3 链接。

uploadImage = () => {
    let file = this.state.file;
   let config = this.state.config;
    RNS3.put(file, config)
      .then((response) => {
        console.log(response.headers.Location);
        this.setState({
          items: this.state.items.map((item, i) =>
            i == 0 ?
              { ...item, imageUrl: response.headers.Location } : item)
        })
        console.log('This is the state of items[0].imageUri ' + this.state.items[0].imageUrl)
      })
  }

因此，我决定首先将图像上传到 s3，并将 items[0].imageUrl 的状态设置为链接。然后将 params 的值设置为 imageUrl，然后通过调用 updateProfileData(params) 更新 WebAPI。我当前面临的问题是，当我按“保存”时，屏幕上弹出的警报显示 items[0].imageUrl 的状态是本地文件。仅当我再次按下“保存”按钮后，警报才会将 items[0].imageUrl 的状态显示为 s3 链接。

            <TouchableOpacity style={styles.button}
              onPress={() => {
                this.uploadImage();
                let params = {
                  ImageUrl: this.state.items[0].imageUrl,
                  EmployeeBio: this.state.items[0].employeeBio
                };
                alert('This is params, ' + params.ImageUrl);
                this.updateProfileData(params);
              }}>
              <View>
                <Text style={styles.text}>Save</Text>
              </View>
            </TouchableOpacity>

我和我的团队无法解决这个问题...感谢您的帮助!

Answer 1

问题在于，当 setState 是异步函数时，您正在同步 JS 线程中执行操作。解决此问题的方法是使用 setState 函数中的回调参数(传入的第二个参数，将在设置状态后执行)并执行您的 updateProfileData 在那里编码。

请参阅此处的解释 - https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296

因此，要解决您的问题，您应该执行以下操作:

组件

<TouchableOpacity style={styles.button}
    onPress={() => this.uploadImage()}>
   <View>
        <Text style={styles.text}>Save</Text>
   </View>
</TouchableOpacity>

上传图片

uploadImage = () => {
    let file = this.state.file;
   let config = this.state.config;
    RNS3.put(file, config)
      .then((response) => {
        console.log(response.headers.Location);
        this.setState({
          items: this.state.items.map((item, i) =>
            i == 0 ?
              { ...item, imageUrl: response.headers.Location } : item)
        },
        // This is your callback
        () => {
            let params = {
                  ImageUrl: this.state.items[0].imageUrl,
                  EmployeeBio: this.state.items[0].employeeBio
                };
            alert('This is params, ' + params.ImageUrl);
            this.updateProfileData(params);
        })
      })
  }