使用API响应触发Modal模态框不生效相关问题求助

• 混用了类组件和函数组件的状态更新语法：你在函数组件中用了类组件专属的this.setState方法更新状态，函数组件没有this指向，这条更新逻辑完全不生效，状态没被修改自然模态框不会弹出。同时你把状态更新函数setModalVisible当成了状态键名使用，语法完全错误。
• 状态用途混淆：modalVisible是专门给Modal组件visible属性传值的布尔类型状态，你直接把API返回的-3~3的数值存进去，既不符合类型要求，也没法后续根据数值判断展示不同模态框，需要额外声明一个状态存接口返回的分数值。
• 接口返回值是字符串类型：你用正则处理后返回的data是字符串格式，直接用于数值判断会有隐式转换的风险，需要先转成数字类型。
• catch分支没有做错误处理：接口报错时你没有任何日志输出也没有兜底逻辑，很难排查接口层面的问题。

首先调整状态声明，新增存储分数的状态：

// 布尔值：控制模态框显隐
const [modalVisible, setModalVisible] = useState(false);
// 数值：存储接口返回的-3~3的分数，用于判断展示不同模态框
const [moodScore, setMoodScore] = useState(0);

然后修改请求回调里的状态更新逻辑，删除错误的this.setState写法，直接调用useState返回的更新函数：

makePostRequest(diaryText)
  .then(response => {
    // 先把字符串转成数字，加兜底避免出现NaN
    const score = Number(response) || 0;
    // 存储接口返回的分数
    setMoodScore(score);
    // 触发模态框显示，你也可以在这里加自定义条件控制是否弹出
    setModalVisible(true);
  })
  .catch(error => {
    // 打印报错方便排查问题
    console.log('请求出错：', error.message);
  })

如果要根据分数展示不同的模态框内容，可以直接在JSX里用moodScore做判断：

<Modal
  animationType="slide"
  transparent={true}
  visible={modalVisible}
  onRequestClose={() => {
    Alert.alert("Modal has been closed.");
    setModalVisible(false);
  }}
>
  <View style={styles.centeredView}>
    <View style={styles.modalView}>
      {/* 按分数区间显示不同文案，也可以直接渲染完全不同的模态框组件 */}
      <Text style={styles.modalText}>
        {moodScore >= 1 ? 'Manderley thinks you are feeling good, is this correct?' :
         moodScore >= -1 ? 'Manderley thinks you are feeling okay, is this correct?' :
         'Manderley thinks you are feeling bad, is this correct?'}
      </Text>
      <Pressable
        style={[styles.YesButton, styles.YesButtonClose]}
        onPress={() => setModalVisible(false)}
      >
        <Text style={styles.textStyle}>Yes</Text>
      </Pressable>
      <Pressable
        style={[styles.NoButton, styles.NoButtonClose]}
        onPress={() => setModalVisible(false)}
      >
        <Text style={styles.textStyle}>No</Text>
      </Pressable>
    </View>
  </View>
</Modal>

内容的提问来源于stack exchange，提问作者Constantine1984