React Native：如何在FlatList中展示指定参数字段数据

• 补全缺失的依赖导入
  原代码仅导入了基础的Text、View组件，缺少渲染列表必需的FlatList、样式模块，以及redux相关的hook，需要更新导入块为：

  import React, { useEffect, useState } from 'react';
  import {
    Text,
    View,
    FlatList,
    StyleSheet,
  } from 'react-native';
  import { useDispatch } from 'react-redux';
  // 确保getTestParamsByRequest、requestId是项目中已定义/传入的有效变量
  

• 补全列表状态定义
  原代码中调用了setFieldTestDisplay但未定义对应的响应式状态，需要在组件函数内补充state声明，同时优化接口请求的状态更新逻辑：

  function debi() {
    const dispatch = useDispatch();
    // 新增：存储接口返回的待展示测试参数
    const [fieldTestDisplay, setFieldTestDisplay] = useState([]);
  
    useEffect(() => {
      (async () => {
        const fieldTestList = await getTestParamsByRequest(requestId);
        // 不管返回空还是有数据都更新状态，空列表会触发FlatList的空占位逻辑
        setFieldTestDisplay(fieldTestList || []);
      })();
    }, [requestId]); // 把requestId加入依赖数组，避免请求拿不到最新参数
  

• 完善列表项渲染逻辑
  在renderItem函数中取出需要展示的Parameter_Code、Parameter_Units字段，同时处理字段末尾多余的空格：

  const renderItem = ({ item }) => {
    return (
      <View style={styles.itemRow}>
        <Text style={styles.paramCode}>{item.Parameter_Code}</Text>
        <Text style={styles.paramUnit}>{item.Parameter_Units.trim()}</Text>
      </View>
    );
  };
  

• 挂载FlatList组件到页面结构中
  替换原组件内的空返回结构，配置FlatList的核心属性：

  return (
      <View style={styles.pageWrapper}>
        <FlatList
          data={fieldTestDisplay}
          renderItem={renderItem}
          // 用唯一的Parameter_Code作为列表项key，避免列表渲染警告
          keyExtractor={(item) => item.Parameter_Code}
          // 数据为空时的占位提示
          ListEmptyComponent={<Text>暂无测试参数数据</Text>}
        />
      </View>
    );
  

• 补充基础布局样式
  避免所有内容挤在一行无间距，补充简单的样式定义：

  const styles = StyleSheet.create({
    pageWrapper: {
      flex: 1,
      padding: 16,
      backgroundColor: '#ffffff',
    },
    itemRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      paddingVertical: 12,
      borderBottomWidth: 1,
      borderBottomColor: '#eeeeee',
    },
    paramCode: {
      fontSize: 16,
      fontWeight: '500',
      color: '#222222',
    },
    paramUnit: {
      fontSize: 14,
      color: '#666666',
    },
  });
  

常见注意事项：

• 原useEffect的依赖数组为空数组，如果requestId是动态传入的路由参数，需要把requestId加入依赖列表，避免组件更新后重复请求或者拿到旧的请求参数
• 接口返回的Parameter_Units字段存在末尾冗余空格，通过trim()处理后展示效果会更整洁
• FlatList自带懒加载渲染，相比直接用map遍历渲染大列表时性能更优

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