javascript - 在 React 中映射元素时，如何根据特定索引处的字段有条件地渲染节点？

Question

我有这样一个数据集:

const data = [
  {id: '123', distance_miles: 300, name: 'Karen', ...},
  {id: '124', distance_miles: 50, name: 'Bob', ...},
  {id: '125', distance_miles: 26, name: 'Kim', ...},
  // ....
];

我正在使用它在 React 中渲染一些元素:

<>
  {data.map(d => <div key={d.id}>{d.name}</div>)}
  // ....
</>

但是，如果此完整数据集中的 distance_miles 字段全部 25，我想插入一个专门插入第三个索引的节点.

我尝试过映射数据集并过滤掉 distance_miles，但我不确定从哪里开始。

我也尝试研究 .splice()，但不确定如何使用它来考虑条件。

我还尝试将渲染的数组保存到一个变量中:

const renderedData = data.map(d => <div key={d.id}>{d.name}</div>)
// splice node into renderedData?

但我遇到了如何读取 distance_mile 字段的障碍。有谁知道如何处理这样的事情？

Answer 1

您可以创建一个辅助函数来检查每个 distance_miles 属性是否大于 25:

const isEveryHigher = (arr) => arr.every(({ distance_miles }) => distance_miles > 25);

然后使用条件映射:

(isEveryHigher(data) 
    ? [...data.slice(0, 3), <SomeNode />, ...data.slice(3)] 
    : data)
.map(() => ...); // render your stuff