如何在flatlist中显示不同的数据集。反应天然

发布于 2025-02-11 22:54:14 字数 866 浏览 1 评论 0原文

我有两个不同的数据集，我将添加到不同的状态。我想将它们都显示在flatlist中，但不知道如何访问第二组数据。

我正在从API请求中获取数据，然后将其设置为状态：

const [data1, setData1] = useState([]);
const [data2, setData2] = useState([]);

我将数据合并在一起：

const finalData = [...data1, ...data2]

我的flatlist：

<FlatList 
  data={finalData}
  renderItem={_renderItem}>
</FlatList>

我的_renderitem：

const _renderItem = ({ item }) => (
  <View>
    <Image
      source={{ uri: item.image }} 
    />
    <View style={{flexDirection: 'column', alignSelf: 'center', paddingLeft: 10 }}>
      <Text>{item.title}</Text>
      <Text>{item.username}</Text>
    </View>
  </View>
);

数据2的其余数据

我希望我的映像来自data1和我尝试查看的进入截面列表，但也陷入了困境。

感谢任何帮助，谢谢！

原文

I have two different datasets that i'm adding to different states. I want to display them both in a Flatlist but don't know how to access the second set of data.

I'm fetching data from an API request then setting it to state:

const [data1, setData1] = useState([]);
const [data2, setData2] = useState([]);

I merged data together:

const finalData = [...data1, ...data2]

My Flatlist:

<FlatList 
  data={finalData}
  renderItem={_renderItem}>
</FlatList>

My _renderItem:

const _renderItem = ({ item }) => (
  <View>
    <Image
      source={{ uri: item.image }} 
    />
    <View style={{flexDirection: 'column', alignSelf: 'center', paddingLeft: 10 }}>
      <Text>{item.title}</Text>
      <Text>{item.username}</Text>
    </View>
  </View>
);

I'd like for my Image to come from data1 and the rest of the data from data2

I've tried looking into Sectionlist but got stuck with that too.

Appreciate any help, thanks!!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜光 2025-02-18 22:54:14

如果您想向一个项目显示，它来自第一个API，其余数据来自其他API，则可以轻松地执行以下方法：

  const [mergedData, setMergedData] = React.useState([]);
  /*
  You are be able to get both of data from 
  server in one block or consider two separated function for each of them (I consider first way and second way will need to a state variable more).
  In this semicodes assume firstData is information data and secondData is your images.
  */
  const firstData = await getFirstData();
  const secondData = await getSecondData();
  /*
  Both above arrays have same length
  */
  const mData = firstData.map((data, index) => {
    return {
      ...data,
      image: secondData[index].image,
    };
  });

  setMergedData (mData);

If you want to show an item that something of it is from first api and rest of data are from other api, you are be able to easily do something like followings approach:

  const [mergedData, setMergedData] = React.useState([]);
  /*
  You are be able to get both of data from 
  server in one block or consider two separated function for each of them (I consider first way and second way will need to a state variable more).
  In this semicodes assume firstData is information data and secondData is your images.
  */
  const firstData = await getFirstData();
  const secondData = await getSecondData();
  /*
  Both above arrays have same length
  */
  const mData = firstData.map((data, index) => {
    return {
      ...data,
      image: secondData[index].image,
    };
  });

  setMergedData (mData);

回复收藏 0 原文

~没有更多了~