当react redux中的用户提要中没有帖子时，如何显示消息

Question

现在，如果我转到显示帖子列表的提要。因此，当没有发布帖子时，我想显示未找到帖子消息。我通过mapStateToProps得到isFetching和posts。

posts是reducer中的一个数组字段，其初始状态为空。因此，当没有发布帖子时，数组是空的。

我该如何显示消息？

render() {
const { isFetching, posts  } = this.props
return isFetching ? (
<p>Fetching....</p>
) : (
<div>
{posts &&
posts.map((post) => {
return <Cards key={post._id} post={post} />
})}
</div>
)
```

Answer 1

检查isFetching的方法相同，但使用posts.length != 0。

return isFetching ? (
<p>Fetching....</p>
) : (
<div>
{(posts && posts.length != 0) ?
posts.map((post) => { 
return <Cards key={post._id} post={post} />
}) : <p>No posts found</p>}
</div> 
)

Answer 2

在这种情况下可以使用条件运算符。

return isFetching ? (
<p>Fetching....</p>
) : (
<div>
{ posts 
? ( 
posts.map((post) => {
return <Cards key={post._id} post={post} />
): (
<div> No posts found</div>
)
})
}
</div>
)

Answer 3

您可以根据需要使用ifelse进行渲染。

render() {
const { isFetching, posts } = this.props
if (isFetching) {
return <p>Fetching...</p>;
} else if (!posts && posts.length) {
return <p>No posts found</p>
} else {
return (
<div>
{posts.map(post => <Cards key={post._id} post={post} />)}
</div>
);
}
}

注意：三元数也可以使用，但我想if在这里看起来很可读。