オブジェクトの配列をマッピングし、それに基づいてdivをレンダリングしています。
以下は私のコードです：
const App = () => {
const types = React.useMemo(() => {
return get(data, 'something.typesDetails', []);
}, [data]);
return (
{true &&
<div> header </div>
<div>
{types.map((t => {
return (
<div>{type.name}</div>
)
})}
</div>
}
);
}
タイプ配列は次のとおりです。
const types = [
{
id: '1',
name: 'type1',
},
{
id: '2',
name: 'type2',
},
]
上記のコードは、データ構造が上記のような場合に正常に機能します。
しかし、型がそのような価値を持っているかどうかを検討してください
const types = [
{
id: null,
name: null,
}
]
この場合でも、タイプを介してマップし、divを表示します。div要素を表示したくありません。タイプの値にnullが含まれているかどうかを確認したり、上記のような値がある場合はタイプのループを停止するにはどうすればよいですか？
filternull値を持つ要素を削除するために使用できます。
types = types.filter(x => !Object.values(x).includes(null));
以下Array#everyを確認するためにも使用できます。
if(types.every(x => !Object.values(x).includes(null)){
//go ahead with mapping
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加