React Native函数传参失败排查及正确传参方法咨询

看起来你的代码逻辑整体是对的，但参数没传递成功大概率是因为绑定函数的时机或者React Native中Button组件的回调特性导致的。我来帮你一步步排查和解决：

1. 先确认参数是否真的传到了sendDraft函数 #

首先在sendDraft函数开头加一行日志，看看点击按钮时有没有拿到正确的billnumber：

sendDraft(billnumber) {
  console.log("传递的账单号：", billnumber); // 新增这行，确认参数是否接收
  axios
    .post("http://192.168.0.111:3000/sendDraft", {
      invoice: billnumber,
    })
    .then((response) => {
      console.log(response);
    })
    .catch((err) => {
      console.error("请求出错：", err.response?.data || err.message); // 新增错误捕获
    });
}

如果日志里没有输出或者值不对，那就是参数传递的问题；如果值是对的，那就要检查API请求的格式（不过你说Postman能跑，大概率还是传递环节的问题）。

2. 改用箭头函数传递参数（推荐） #

你当前用bind(this, invc.billnumber)的方式，理论上是可行的，但在React Native的列表渲染场景中，bind会在每次组件渲染时创建新的函数实例，可能导致意外的参数绑定问题。更稳妥的方式是用箭头函数包裹回调：

<Button
  title="SEND DRAFT"
  onPress={() => this.sendDraft(invc.billnumber)}
/>

这种写法是在按钮点击时才去获取当前循环项的billnumber，能确保传递的是最新的、正确的值，而且写法更直观，不容易出错。

3. 进阶优化：避免列表渲染时创建新函数（可选） #

如果你的发票列表数据量很大，每次渲染都创建箭头函数可能会影响性能。这时候可以把每个发票项封装成独立的子组件，把billnumber和sendDraft作为props传进去：

// 子组件：InvoiceCard.js
const InvoiceCard = ({ invc, onSendDraft }) => (
  <Card key={invc.invoiceId}>
    <Card.Title>Invoice Number: {invc.billnumber}</Card.Title>
    <Card.Divider />
    <View>
      <Text> Customer's address: {invc.address} </Text>
      <Text>Customer's email: {invc.email}</Text>
      <Text>Total Price: {invc.price}</Text>
    </View>
    <Button
      title="SEND DRAFT"
      onPress={() => onSendDraft(invc.billnumber)}
    />
  </Card>
);

// 父组件中使用
let drafts = this.state.invoice.map((invc) => {
  return <InvoiceCard key={invc.invoiceId} invc={invc} onSendDraft={this.sendDraft.bind(this)} />;
});

这样能减少不必要的函数创建，提升列表渲染性能。

为什么原来的bind方式可能失效？ #

在map循环中使用bind时，函数是在组件渲染阶段就绑定了当时的invc值。如果你的state.invoice后续有更新，或者组件因为其他原因重新渲染，可能会出现绑定的参数不是你期望的最新值。而箭头函数是在点击触发时才去读取invc.billnumber，能避免这种时序问题。

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