从React中的数据数组渲染单个元素

Question

如果我要通过一组数据对象进行映射，并且只想根据下面的某个条件从数组中渲染单个元素：

dataArray.map((element, i) => {
  if(i === currentElement){
    return (
        <div>{element.data}</div>
    )
  } else {
    return null;
  }
});

这可以接受吗？这似乎回归了我所追求的但是很好奇，如果这是最有效的方法，因为这仍然返回一个数组的数据长度与所有null元素的数组，除了在所需的单个元素。

Answer 1

在数组上使用map将返回另一个数组，并在每个元素上执行您的函数，因此您正在使用的函数实际上是在推动值＆＃39; null＆＃39;进入返回数组中的任何元素都没有通过你的条件。你可以使用

dataArray.map((ele, i) => {
  if(i === currentElement){
    return (
      <div>{element.data}</div>
    )
}

并且地图对任何未通过条件的元素都不会做任何事情。

在React中对数组进行映射通常（通常是？）用于创建<li>标记，而React可能会在您的控制台中因没有密钥而变得暴躁。如果您看到这一点，请在此处查看此链接：https://reactjs.org/docs/lists-and-keys.html

Answer 2

您可以使用find函数来获取要渲染的值，而不是渲染一堆null值。

const element = dataArray.find((el, i) => i === currentElement);

if(element) {
  return (<div>{element.data}</div>);
}