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)

                  }
                }}

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

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）显示{}，即空值。是异步功能的问题，它不显示状态中保存的值。

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
       })
    })

在React Native（Expo）中的异步函数中设置状态

2 个答案: