React Native中Axios发送POST请求报500错误求助

核心问题分析 #

你的代码存在几个关键错误，直接导致后端返回500状态码：

1. POST请求参数是字符串字面量而非实际state值，后端无法解析无效数据
2. 表单状态更新逻辑错误，子组件无法正确修改父组件state
3. 请求时传递的是函数而非数据对象

分步修复代码 #

1. 修复POST请求参数构造

将postData里的info改为直接引用state的实际值，不要用字符串包裹，也不需要封装成函数：

const postData = async () => {
    const info = {
        Number_invoice: data.NumberInvoice,
        Date_create: data.DateInvoice,
        Name_Customer: data.NameCustomer,
        Unit_counter: data.Unit_counter,
        Amount_product: data.Amount_product,
        price_per: data.price_per,
        price_total: data.price_total,
    };
    try {
        const response = await axios.post("http://192.168.1.4:8000/Set_invoice_Sale", info);
        console.log("请求成功:", response.data);
        // 按需决定是否用后端返回数据更新state，避免覆盖用户输入
        // setdata(response.data);
    } catch (error) {
        console.error('请求错误详情:', error.response?.data || error.message);
    }  
};

2. 修复表单状态更新逻辑

原SendState要求一次性传入所有参数，子组件无法单独更新字段，改成支持单个字段更新的函数：

// 替换原SendState函数
const updateField = (fieldName, value) => {
    setdata(prev => ({ ...prev, [fieldName]: value }));
};

修改子组件的sendSetState属性，传递对应字段的更新逻辑：

// 日期输入框示例
<FormInvoice 
    caption={"تاریخ :"} 
    sendinfo={data.DateInvoice} 
    sendSetState={(value) => updateField('DateInvoice', value)} 
/>

// 发票号输入框示例
<FormInvoice 
    caption={"شماره صورتحساب :"} 
    sendinfo={data.NumberInvoice}  
    sendSetState={(value) => updateField('NumberInvoice', value)} 
/>

同时删除无效的useEffect调用：

// 移除这段空调用，避免清空state
// useEffect(()=>{
//     SendState();
// },[]); 

3. 验证后端接口可用性

• 确认后端服务http://192.168.1.4:8000正常运行
• 用Postman或curl测试接口，传入正确格式的数据，验证接口本身是否正常
• 查看后端日志，获取500错误的具体原因（比如字段缺失、数据类型不匹配）

额外优化建议 #

• 在catch中打印error.response?.data，可以获取后端返回的错误详情，更快定位问题
• 表单提交前添加数据校验，避免发送空值或不符合格式的数据给后端
• 子组件FormInvoice应接收onChange回调，将输入值传递给父组件，确保状态同步正确

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