Оператор if в функции реагирования .map

Question

Я пытаюсь отобразить функцию в listItems, только если условие истинно, в противном случае пропустите его.Я пробовал разные вещи, но я не хочу возвращаться, пока список не будет завершен.

У меня есть этот код:

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

    return listItems;
  }

Answer 1

Если вы вернете что-то в функцию .map, это не завершит цикл функции и продолжит итерацию.Вместо этого то, что вы вернете, будет помещено в результирующий массив, который возвращает .map.Это означает, что если внутри .map вы возвращаете компонент в зависимости от оператора if, а в противном случае - результат, то будет массив со всеми возвращенными компонентами.

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

Answer 2

Если еще будет работать в круглых скобках, а также не использовать индекс непосредственно в качестве ключа, вместо этого добавьте некоторый текст вместе с индексом для ключевого слова, чтобы

Изменить

   {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>
      )}
    }
   )}