基于Access Token的Feedback POST提交无响应问题排查

核心问题：POST请求未绑定到提交事件 #

你的代码把axios.post直接写在组件函数顶层，导致组件每次渲染时都会自动发送POST请求，而不是用户点击提交按钮时才触发。同时handleSubmit函数里完全没有调用提交反馈的逻辑，这就是点击后没反应的根本原因。

具体问题与修复步骤： #

1. 将POST请求移到handleSubmit函数内

只有用户点击提交按钮时才执行提交逻辑，同时补充认证与刷新逻辑：

const handleSubmit = async () => {
    console.log('Submitted Feedback: ', inputText);
    try {
        // 注意：后端字段名要和接口匹配，这里从渲染逻辑推测是feedback_desc
        const res = await axios.post(
            `https://7a9f-119-157-88-43.ngrok-free.app/listing/${item.id}/feedback`,
            {
                feedback_desc: inputText,
                user_id: userInfo.data.id // 携带当前登录用户ID，后端需关联用户
            },
            {
                headers: {
                    // 如果后端用JWT认证，携带token
                    Authorization: `Bearer ${userInfo.data.token}`
                }
            }
        );

        const FeedbackInfo = res.data;
        setFeedbackinfo(FeedbackInfo);
        console.log(FeedbackInfo);

        // 提交成功后刷新反馈列表
        const refreshRes = await axios.get(`https://7a9f-119-157-88-43.ngrok-free.app/listing/${item.id}/feedback`);
        setResponseData(refreshRes.data.data);
    } catch (e) {
        console.log(`feedback error ${e}`);
    }
    setisModalVisible(false);
};

2. 移除组件顶层的冗余POST请求

直接删除这段代码，它会导致组件一加载就自动发请求，完全不符合业务逻辑：

// 删掉这段冗余代码！！！
axios.post (`https://7a9f-119-157-88-43.ngrok-free.app/listing/${item.id}/feedback`, {
    inputText
}).then(res => {
    let FeedbackInfo = res.data;
    setFeedbackinfo(FeedbackInfo);
    AsyncStorage.setItem('FeedbackInfo', JSON.stringify(FeedbackInfo));
    setIsLoading(false);
    console.log(FeedbackInfo);

}).catch(e => {
    console.log(`feedback error ${e}`);
    setIsLoading(false);
});

3. 修复未定义变量与缺失导入

• setIsLoading未定义：如果需要加载状态，先添加const [isLoading, setIsLoading] = useState(false);
• AsyncStorage未导入：需从@react-native-async-storage/async-storage导入后再使用
• 模态框按钮参数错误：Button Submit应为title="Submit"，修改为<Button title="Submit" onPress={handleSubmit}/>

4. 确保请求参数与后端接口匹配

后端接口大概率需要的字段不是inputText，而是feedback_desc（从你渲染反馈时用item.feedback_desc推测），同时必须携带用户身份信息（ID或Token），否则后端无法将反馈关联到当前登录用户，可能导致存储失败。

5. 优化模态框样式（可选）

当前模态框内容紧贴屏幕边缘，建议添加居中遮罩样式：

// 在styles里新增
modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center'
},
modalContent: {
    width: '90%',
    backgroundColor: theme.colors.lightGrey,
    paddingVertical: baseStyle.paddingVertical(15),
    paddingHorizontal: baseStyle.paddingHorizontal(15),
    borderRadius: baseStyle.borderRadius(16),
}

// 修改Modal内的视图结构
<View style={styles.modalOverlay}>
    <View style={styles.modalContent}>
        <TextInput
            style={styles.textInput}
            placeholder='Enter Feedback'
            onChangeText={setInputText}
            value={inputText}
        />
        <View style={styles.Button}>
            <Button title="Submit" onPress={handleSubmit}/>
            <Button title="Close" onPress={() => setisModalVisible(false)}/>
        </View>
    </View>
</View>

修复后核心流程 #

1. 用户点击"Post a review"打开模态框
2. 输入反馈内容
3. 点击Submit触发handleSubmit，发送带用户身份的POST请求
4. 提交成功后自动刷新反馈列表，关闭模态框

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