使用 API 响应触发模态

Question

我正在尝试使用我的 API 的响应（响应是从 -3 到 +3 的数字）来触发模态。我收到了 API 的回复，并将数字存储在状态变量 setModalVisible 中，我认为这会导致模态出现，但实际上并没有。最终我希望根据数字显示不同的模态，即 if (response < 3) { certainModal } else { } 但是我无法渲染这个初始模态。

下面是包含最相关代码的片段：

async function makePostRequest (diaryText) {

  let payload = { description: diaryText };

  let response = await axios.post('http://localhost:3000/', payload);

  let data = response.data.replace(/[^0-9+\/*=\-.\s]+/g, '');


  return data;
}

makePostRequest(diaryText)
   .then(response => {
     this.setState({ setModalVisible: response });
   })
     .catch(error => {
       error.message;
     })

const [modalVisible, setModalVisible] = useState(false);
                    return (
                        <View style={styles.centeredView}>
                          <Modal
                              animationType="slide"
                              transparent={true}
                              visible={modalVisible}
                              onRequestClose={() => {
                                Alert.alert("Modal has been closed.");
                                setModalVisible(!modalVisible);
                              }}
                          >
                            <View style={styles.centeredView}>
                              <View style={styles.modalView}>
                                <Text style={styles.modalText}>Manderley thinks you are feeling good/okay/bad, is this correct?</Text>
                                <Pressable
                                    style={[styles.YesButton, styles.YesButtonClose]}
                                    onPress={() => setModalVisible(!modalVisible)}
                                >
                                  <Text style={styles.textStyle}>Yes</Text>
                                </Pressable>
                                <Pressable
                                    style={[styles.NoButton, styles.NoButtonClose]}
                                    onPress={() => setModalVisible(!modalVisible)}
                                >
                                  <Text style={styles.textStyle}>No</Text>
                                </Pressable>
                              </View>
                            </View>
                          </Modal>
                        </View>
                    )

Answer 1

我认为您只需要在收到 API 响应后检查值即可。

假设您有一个函数：

function checkAPIValue() {
    const apiResponse = functionToCallAPI()
    if (apiResponse.response < 3){
        setModalVisible(true) // Here you change the value of your modalVisible
    }
}

使用 API 响应触发模态

Using an API response to trigger a modal

modal-dialog

reactjs