React Native中如何从API返回数据里指定显示特定字段

你可以通过定义一个允许显示的字段列表，在渲染时只处理这些字段，就能实现只展示指定内容的需求。以下是修改后的完整代码：

import React, { useState, useEffect } from 'react';
import { ScrollView, View, Text } from 'react-native';

export default Apps = () => {
  const [data, setData] = useState({});
  // 定义需要显示的字段列表
  const allowedFields = ['Id', 'name', 'groupName', 'loginId'];

  const myHeaders = new Headers();
  myHeaders.append("sign", "//sign");
  myHeaders.append("token", "//token");
  
  const requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  useEffect(() => {
    fetch("//link", requestOptions)
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
  }, []);

  return (
    <ScrollView>
      <View>
        <Text>Info</Text>
        {/* 先判断data.data是否存在，避免初始渲染时的报错 */}
        {data.data && Object.entries(data.data)
          .filter(([key]) => allowedFields.includes(key)) // 过滤出允许的字段
          .map(([key, val]) => (
            <Text key={key}>
              {key}: {val}
            </Text>
          ))}
      </View>
    </ScrollView>
  )
};

关键修改说明： #

• 新增allowedFields数组，存放你需要展示的字段名，后续调整显示字段直接修改这个数组即可。
• 渲染时通过filter方法筛选出目标字段，再进行map渲染。
• 增加data.data &&的判断，避免组件初始渲染时data.data为undefined导致的报错。

如果你想在获取数据时就直接提取需要的字段（减少state存储的数据量），也可以在setData阶段处理：

.then((json) => {
  const filteredData = {
    ...json,
    data: Object.fromEntries(
      Object.entries(json.data).filter(([key]) => allowedFields.includes(key))
    )
  };
  setData(filteredData);
})

这样state里的data.data就只包含你需要的字段，渲染时无需再做过滤。

内容的提问来源于stack exchange，提问作者K is Coding