如何将来自不同来源的参数传递到 Flatlist 的 ListItem 中？答案

【问题标题】：How to pass a parameter from a different source into ListItem of the Flatlist?如何将来自不同来源的参数传递到 Flatlist 的 ListItem 中？
【发布时间】：2020-04-18 21:55:18
【问题描述】：

我正在渲染 Flatlist 中的一些项目，我在其中调用 renderNativeItem 以在 ListItem 中渲染它们，并且像往常一样我将值作为参数传递，但是，我想从不同的数组将值传递给字幕。

这背后的原因是，ìtt 参数中有用户的值，例如姓名，姓氏，但在calculated_distances 中有值在另一个函数中单独计算，但它们是从数据库中的同一文档中一起提取的。

因此，当从 db 中获取数据时，我将所有数据设置为 this.state.dataSource 数组，然后从该数组中获取位置并进行计算并将其设置为 this.state.calculated_distances。完成此操作后，我调用 Flatlist 来渲染 this.state.dataSource，但每个用户的计算距离在 this.state.calculated_distances 中的另一个数组中。这基本上就是我在这种情况下的结局。

这里是renderNativeItem函数：

renderNativeItem = (itt) => {
    const { calculated_distances } = this.state;
    return (
        <ListItem
            title={itt.name + " " + itt.surname}
            subtitle={calculated_distances}
        />
    )
}

【问题讨论】：

您必须在提取时将数据合并到单个数据源。
@ChristosLytras 您如何看待 iman roosta 的回答？我可以那样做吗？
我认为那样做是没有意义的，它可能有效，但是可能会发生冲突。如果您将这些数据结合起来，您将确定哪个calculated_distances 映射到每个数据。
@ChristosLytras 但是我必须根据计算向该数组添加一个新字段，并且我必须为数组的每个对象执行此操作。在这种情况下我可以使用什么？
是的，这就是我要说的。您在获取时计算距离值，并使用新的距离属性更新每个项目。必须在渲染时调用每个项目的计算，这可能会使整个列表变得缓慢或滞后。

标签： arrays react-native react-native-flatlist listitem

【解决方案1】：

设置

subtitle={functionName(itt.id)}

这样 functionName 使用 id 或其他值获取 calculated_distances

【讨论】：

对不起，我误会了，functionName 是什么？
functionName 获取参数和地图数据 computed_distances any 每个Item