如何检查数据是否存在？循环数据时为NewComponent传参问题

直接给你两种靠谱的实现方式，以及常见的坑：

方式一：先过滤再遍历（推荐） #

先把符合条件的数据筛选出来，再遍历渲染组件，逻辑更清晰，也避免在map里写过多分支：

// 第一步：过滤出满足条件的数据
const validData = originalData.filter(item => {
  // 这里替换成你的判断逻辑，比如检查目标值是否存在且有效
  return item.targetValue !== undefined && item.targetValue !== null;
});

// 第二步：遍历过滤后的数组渲染组件
return (
  <div>
    {validData.map(item => (
      <NewComponent key={item.id} data={item.targetValue} />
    ))}
  </div>
);

方式二：在Map内部做条件判断 #

如果不想单独过滤，也可以在map里直接加判断，注意每个分支都要有返回值：

return (
  <div>
    {originalData.map(item => {
      // 你的判断条件，比如检查值是否存在
      if (item.targetValue != null) {
        return <NewComponent key={item.id} data={item.targetValue} />;
      }
      // 不符合条件时返回null，不渲染任何内容
      return null;
    })}
  </div>
);

常见错误排查 #

你之前的方法无效，大概率是这几个问题：

• 条件判断逻辑错误：比如要检查属性是否存在时，直接用if (item.targetValue)会把0、''、false这些合法值当成无效，此时应该用'targetValue' in item或者item.hasOwnProperty('targetValue')。
• map里没返回值：如果条件不满足时没返回null，会导致map返回undefined，引发渲染错误。
• key值问题：虽然和条件判断无关，但map循环必须给组件加唯一key，否则可能出现渲染异常。

内容的提问来源于stack exchange，提问作者MinolaT