React Native对接PHP MySQL后端报错：Reference error: Can't find variable rowData

先聚焦你遇到的两个核心问题：无法获取PHP后端数据和rowData未定义的引用错误，咱们一步步拆解排查：

1. 先搞定"Reference error: Can't find variable rowData" #

这个错误90%是因为你在渲染ListView时，没正确在renderRow方法里接收行数据参数，或者参数名写错了。比如你可能写了这样的错误代码：

<ListView
  dataSource={this.state.dataSource}
  renderRow={() => (
    <Text>{rowData.orderId}</Text> // 这里rowData根本没被定义！
  )}
/>

正确的写法是必须在renderRow里显式接收每一行的数据参数：

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => ( // 这里要把rowData作为参数传进来
    <View>
      <Text>订单号：{rowData.orderId}</Text>
      <Text>地址：{rowData.address}</Text>
    </View>
  )}
/>

另外提一句：React Native的ListView已经被官方标记为过时组件了，如果你用的是较新版本的RN，建议换成FlatList，用法更简洁高效：

<FlatList
  data={this.state.orderList}
  renderItem={({item}) => ( // FlatList用item指代每一行数据
    <Text>订单号：{item.orderId}</Text>
  )}
  keyExtractor={(item) => item.id.toString()}
/>

2. 排查无法从PHP获取数据的问题 #

2.1 先确认PHP后端返回的JSON是否合法 #

你的order.php必须返回标准的JSON数组，不能有多余的HTML输出或语法错误。给你一个标准的PHP示例：

<?php
// 连接数据库（替换成你的数据库信息）
$dbConn = mysqli_connect('localhost', 'root', 'your_password', 'delivery_db');
if (!$dbConn) {
  die(json_encode(['error' => '数据库连接失败']));
}

// 查询订单数据
$query = "SELECT * FROM orders WHERE status = 'pending'";
$result = mysqli_query($dbConn, $query);

// 把查询结果转成数组
$orderData = [];
while ($row = mysqli_fetch_assoc($result)) {
  $orderData[] = $row;
}

// 设置响应头为JSON格式，然后输出
header('Content-Type: application/json');
echo json_encode($orderData);

// 关闭连接
mysqli_close($dbConn);
?>

你可以直接在浏览器里访问http://192.168.xx.xxx/deliveryPerson/order.php，看看返回的内容是不是合法的JSON（比如用浏览器的开发者工具查看响应）。如果返回的是乱码、HTML或者报错信息，那后端肯定有问题。

2.2 完善React Native的fetch逻辑 #

你的代码里ds.cloneWithRows(response...被截断了，必须完整传入responseJson，还要加上错误捕获和日志，方便排查问题：

componentDidMount() {
  fetch('http://192.168.xx.xxx/deliveryPerson/order.php')
    .then((response) => {
      // 先检查网络响应是否成功
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      return response.json();
    })
    .then((responseJson) => {
      console.log('后端返回的数据：', responseJson); // 打印数据，确认是否拿到
      let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.setState({
        isLoading: false,
        dataSource: ds.cloneWithRows(responseJson) // 这里要完整传入responseJson
      });
    })
    .catch((error) => {
      console.error('请求出错了：', error); // 捕获错误，比如网络不通、JSON解析失败
    });
}

通过console.log和catch块，你能快速知道是网络连不上，还是后端返回的JSON有问题。

2.3 检查网络权限和跨域问题 #

• Android端：确保AndroidManifest.xml里添加了网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS端：如果你的PHP后端用的是HTTP（不是HTTPS），需要在Info.plist里添加ATS例外：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

• 还要确认你的手机/模拟器和运行PHP的电脑在同一个局域网里，IP地址192.168.xx.xxx是正确的，能ping通。

排查顺序建议 #

1. 先修复renderRow的参数问题，解决rowData未定义的报错
2. 测试PHP后端的JSON输出是否合法
3. 查看RN控制台的日志，确认fetch是否成功拿到数据
4. 检查网络权限和局域网连接

按这个步骤来，应该能快速解决你的问题！

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