React 中有条件呈现的列表使用一种方法，而不是另一种方法

Question

我有要呈现的产品列表。我还有一组关键字，用于排除呈现的产品。

我正在遍历关键字数组并检查产品标题是否包含任何条目。然后 return 是一个布尔值。

以下代码无效。 console.log 有效并反映了结果，但未呈现任何内容。

function inExcludes(product, excludedItems) {

  excludedItems.forEach( item => {
    if (product.includes(item)) {
      console.log(true);
      return true;
    } else {
      console.log(false);
      return false;
    }
  })
  
}

export function CardsFiltered(props) {

  const cards = props.items.map((product) => {
    if (inExcludes(product.title, props.excludedItems) === false)
    return (
      <CardValidation
        key={product.id}
        id={product.id}
        product={product}
      />
    )
  })

  return (
    <>
      {cards}
    </>
  );

}

但是，如果我将一个变量设置为布尔值，如果条件为真，则切换该变量，然后 return 该变量，它起作用并且我的卡片被渲染（下面的代码）。

有人能解释一下吗？因为我想不通。

function inExcludes(product, excludedItems) {
  let result = false;

  excludedItems.forEach( item => {
    if (product.includes(item)) {
      result = true;
    }
  })

  return result;
}

export function CardsFiltered(props) {

  const cards = props.items.map((product) => {
    if (!inExcludes(product.title, props.excludedItems))
    return (
      <CardValidation
        key={product.id}
        id={product.id}
        product={product}
      />
    )
  })

  return (
    <>
      {cards}
    </>
  );

}

Answer 1

您对 'inExcludes' 的第一个实现不是 return 布尔值 (true/false)。它只是对 excludedItems 数组中的每个项目执行 'forEach'。该循环中的 return 不是整个函数的 return。

因此，由于它有效地 returns 'undefined' 您的渲染器决定不渲染任何东西。

这里有一些东西可以满足您的需求（稍微简化了一点）：

https://codesandbox.io/s/awesome-mcclintock-hkkhsi?file=/src/App.js

React 中有条件呈现的列表使用一种方法，而不是另一种方法

Conditionally rendered list in React is behaving with one method, but not another

javascript

reactjs

list

conditional-rendering