Каков наиболее эффективный способ рендеринга вложенного объекта n-уровня в React JS?

Каков наиболее эффективный способ рендеринга вложенного объекта n-уровня в React JS?

Ваш обратный вызов map() не имеет return значения, но в течение второго оператора if вы возвращаете массив, так что в итоге вы получите [undefined, undefined, ...] когда вернетесь к каждой groups .

Чтобы исправить ваше решение, замените оба .map() на .forEach() и удалите ключевое слово return перед conditionObj.groups.map(...) .

Вот лучший подход, хотя:

 function ConditionGroup ({ expression, groups }) { const conditionExpressions = useMemo( expression {amp}amp;{amp}amp; expression.map( (value, index) ={amp}gt; ( {amp}lt;NewExpression key={index} conditionExpression={value} /{amp}gt; ) ), [expression] ); const conditionGroups = useMemo( groups {amp}amp;{amp}amp; groups.map( (value, index) ={amp}gt; ( {amp}lt;ConditionGroup key={index} {...value} /{amp}gt; ) ), [groups] ); return ( {amp}lt;div{amp}gt; {conditionExpressions} {conditionGroups} {amp}lt;/div{amp}gt; ); } 

Обратите внимание, что использование index в качестве ключа является антипаттерном . В идеале, вы захотите использовать уникальный идентификатор, если он вам предоставлен. Посмотрите ReactJS: Каков наилучший способ дать ключи в элементе массива для получения дополнительной информации об этом.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector