在 React Native(Expo) 中的异步函数中设置状态

Question

我正在使用 React Native 的 Expo ，我需要将 API Fetch 响应保存到状态。

我的代码是这样的：

onPress={async () => {
                  if (this.camera) {
                    const options = { quality:0, base64: true};
                    let photo = await this.camera.takePictureAsync(options);
                      setTimeout(()=>{     
                      fetch('https://c7pl8gkrj6.execute-api.ap-southeast-1.amazonaws.com/prod/rekog', {
                        method: 'POST',
                        headers: {
                          Accept: 'application/json',
                          'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                          base64: photo['base64'],
                        }),
                      }).then((responseJson) => {  
                        this.setState({
                            response:responseJson
                            })
                        })
                        .catch((error) => {
                          console.error(error);
                        });
                        this.setState({captured:true})
                        }, 3000)
                  }
                }}

我想将响应存储在名为"响应"的状态变量中。但是当我想显示保存在状态中的响应时，它将呈现为空。

if(this.state.captured){
        console.log(this.state.response)
        return(
          <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'response1', data: [this.state.response]}
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
        );
         }else{
           ...

在这里，console.log（this.state.response）显示{}，即null值。是异步函数的问题，它没有显示保存在状态中的值。

Answer 1

不，绝对不是，只要你的API确实返回了一个结果，但你应该这样做。

onPress={async () => {
              if (this.camera) {
                const options = { quality:0, base64: true};
                let photo = await this.camera.takePictureAsync(options);
                  setTimeout(()=>{     
                  await fetch('https://c7pl8gkrj6.execute-api.ap-southeast-1.amazonaws.com/prod/rekog', {
                    method: 'POST',
                    headers: {
                      Accept: 'application/json',
                      'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                      base64: photo['base64'],
                    }),
                  }).then(function(response) {
                      return response.json()
                    }).then((responseJson) => {  
                    this.setState({
                        response:responseJson
                        })
                    })
                    .catch((error) => {
                      console.error(error);
                    });
                    this.setState({captured:true})
                    }, 3000)
              }
            }}

你在那里错过了几行。

Answer 2

你需要首先提取响应，所以你必须在setState之前编写一个响应，然后像下面这样承诺，其中reponse.json（）提取实际响应并将其传递给responseJson。谢谢，希望它对您有用。

   .then(reponse => response.json())
   .then((responseJson) => {  
       this.setState({
           response:responseJson
       })
    })