在React JSX return中过滤映射的最佳实践是什么?

Question

当在组件中返回以下内容以渲染卡片时，您将在哪里放置这样的过滤器?

{state.messages.map((message, index) => (
<div key={index}>
<Center>
<Box
maxW={'850px'}
w={'full'}
boxShadow={'2xl'}
rounded={'md'}
p={6}
overflow={'hidden'}
>
<Flex>
<h4>UserID: {message.id}</h4>
<Spacer/>
<Button onClick={'test'} colorScheme='teal' variant='solid' >
<DeleteIcon/>
</Button>
</Flex>
<h3>User(email for now): {message.user} </h3>
<h2 >message: {message.message}</h2>
<p>Date: {message.createdAt}</p>
</Box>
</Center>
<Container height={50}/>
</div>   
))}

我的第一个想法是

{state.messages.filter((message) => message.id).map((message, index) => (... 
this doesn't return anything but a regular map so not it probably just an example
...}

所以希望有人能解释什么是过滤映射返回jsx的最佳实践。你能在没有调用栈错误的情况下做我想做的事情吗?

有人说这个片段是正确的方式，所以我会在早上修复它并更新/关闭这个。如果有人想隔夜确认，太感谢了

Answer 1

你的方法是最好的方法。

首先，filter和map是最容易使用的函数。

其次，filter最好在map之前使用，原因有两个:

• 通过在映射之前删除不需要的项，您可以节省计算，因为您不映射不需要的项。
• map函数返回JSX.Elements，这比state.messages中的对象更难应用过滤器。

Answer 2

正如线程中的其他用户建议的那样，这是我使用的解决方案，它工作得很好

{state.messages.filter((message) => message.id === user?.issuer).map((message, index) => (
<div key={index}>
<Center>
<Box
maxW={'850px'}
w={'full'}
boxShadow={'2xl'}
rounded={'md'}
p={6}
overflow={'hidden'}
>
<Flex>
<h4>UserID: {message.id}</h4>
<Spacer/>
<Button onClick={'test'} colorScheme='teal' variant='solid' >
<DeleteIcon/>
</Button>
</Flex>
<h3>User(email for now): {message.user} </h3>
<h2 >message: {message.message}</h2>
<p>Date: {message.createdAt}</p>
</Box>
</Center>
<Container height={50}/>
</div>   
))}

用户?。发行者是上下文的auth ID所以它根据前一个帖子的ID ===映射到你的auth ID