React .map 函数中的 If 语句

Question

我正在尝试仅在条件为真时将函数映射到 listItems，否则跳过它。我一直在尝试不同的东西，但我不想在列表完成之前 return。

我有这个代码：

    const listItems = (
      <ul>
        {desclist.map((point, index) =>
        if (point.length < 2) {
            <li key={index}>
              <p>{point}</p>
            </li>
          )}
        }
      </ul>
    );

    return listItems;
  }

Answer 1

If else 将在括号下工作并且也不要直接使用索引作为键而是将一些文本连同索引附加到键属性所以

改变

   {desclist.map((point, index) =>
    if (point.length < 2) {
        <li key={index}>
          <p>{point}</p>
        </li>
      )}
    }

到

   {desclist.map((point, index) => {
    if (point.length < 2) {
        return (<li key={'Key-'+index}>
          <p>{point}</p>
        </li>
      )}
    }
   )}

Answer 2

如果你在 .map 函数中 return 某些东西，它不会结束函数的循环并且仍然会继续迭代。相反，您 return 将被放入 .map return 的结果数组中。这意味着如果在 .map 中你 return 一个组件取决于 if 语句，否则 none，结果将是一个数组，其中包含所有被 returned 的组件.

const listItems = (
    <ul>
        {
            desclist.map((point, index) =>
                if (point.length < 2) {
                    return <li key={index}>
                        <p>{point}</p>
                    </li>;
                }
            );
        }
    </ul>
);

React .map 函数中的 If 语句

If statement in react .map function

reactjs

function

dictionary

conditional