React Native报错Can't find variable: meterData，列表渲染问题求助

错误根源 #

你遇到的「Can't find variable: meterData」问题，核心是变量作用域错误 + 未用React状态管理异步数据：

• meterData 是在fetch的异步回调内部声明的局部变量，组件渲染阶段（return部分）根本访问不到；
• 异步获取数据后，没有通过状态更新触发组件重新渲染，就算作用域没问题，也拿不到最新数据。

修复后的完整代码 #

import React, { useState, useEffect } from 'react';
import { SafeAreaProvider, View, Text } from 'react-native';
import { ListItem, Avatar } from 'react-native-elements';
import xml2js from 'xml2js'; // 提前导入，避免在回调内动态require

function getReadingOrder(Emp_Number, { navigation }) {
  // 用useState声明状态，初始值设为空数组
  const [expanded, setExpanded] = useState(true);
  const [meterData, setMeterData] = useState([]);

  // 用useEffect执行异步请求，避免组件重复渲染时发起多次请求
  useEffect(() => {
    fetch(`http://somewebsite/gecol/partner/api.php?emp_number=${Emp_Number}`, {
      method: 'POST',
      headers: {
        Accept: 'text/plain',
        'Content-Type': 'text/plain'
      }
    })
    .then((response) => response.text())
    .then((data) => {
      const parser = new xml2js.Parser();
      parser.parseString(data, (err, result) => {
        if (err) {
          console.error('XML解析失败:', err);
          return;
        }
        // 兼容接口返回单个/多个counter的情况
        const counters = Array.isArray(result.counter) ? result.counter : [result.counter];
        // 转换数据格式并更新状态
        const formattedData = counters.map(counter => ({
          servicePoint: counter.serviceNumber,
          counternumber: counter.counternumber,
          consumer: counter.consumername,
          consumpationtype: counter.consumpationtype,
          currentread: counter.currentread,
          currentdate: counter.currentdate,
          lastread: counter.lastread,
          lastdate: counter.lastdate,
          consumpation: counter.consumpation,
          phonenumber: counter.phonenumber
        }));
        setMeterData(formattedData);
      });
    })
    .catch((error) => {
      console.error('请求出错:', error);
    });
  }, [Emp_Number]); // 依赖Emp_Number，当它变化时重新发起请求

  return (  
    <SafeAreaProvider>
      <View style={ReaderHome.Accordion}>
        {/* 遍历状态中的meterData渲染组件 */}
        {meterData.map((meter, i) => (
          <ListItem.Accordion 
            key={i} // 给列表项添加唯一key
            content={
              <>
                <Avatar size={64} icon={{ name: 'home', type: 'AntDesign' }} containerStyle={{ backgroundColor: '#1f95c0' }}/>
                <ListItem.Content>
                  {/* 修复变量引用：必须用{}包裹才能解析变量 */}
                  <ListItem.Title style={{left:10}}><Text style={ReaderHome.ConsumerName}>{meter.consumer}</Text></ListItem.Title>
                  <ListItem.Subtitle style={{left:10}}><Text style={ReaderHome.ServiceNumber}>{meter.servicePoint}</Text></ListItem.Subtitle>
                </ListItem.Content>
              </>
            }
            isExpanded={expanded}
            onPress={() => setExpanded(!expanded)}
          >
            <ListItem onPress={() => console.log('s')} bottomDivider>
              <Avatar title={''} source={''} />
              <ListItem.Content>
                <ListItem.Title>{meter.currentread}</ListItem.Title>
                <ListItem.Subtitle>{meter.lastread}</ListItem.Subtitle>
              </ListItem.Content>
              <ListItem.Chevron />
            </ListItem>
          </ListItem.Accordion>
        ))}
      </View>
    </SafeAreaProvider>
  );
}

关键改动点 #

• 状态管理：用useState声明meterData状态，通过setMeterData更新数据，触发组件重新渲染；
• 异步请求规范：把fetch放在useEffect中，通过依赖控制请求触发时机；
• 作用域修正：移除回调内的局部meterData变量，直接操作全局状态；
• XML解析兼容：处理接口返回单个/多个计量器数据的情况；
• 渲染细节修复：修正变量引用格式（添加{}）、给列表项加key属性；
• 错误处理：添加请求和解析环节的错误捕获，方便排查问题。

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