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

Posted 2023-02-22

【中文标题】react redux中用户提要中没有帖子时如何显示消息？

【英文标题】：How to show the message when there are no posts in user feed in react redux?

【发布时间】：2020-08-23 23:27:17

【问题描述】：

现在，如果我转到显示帖子列表的提要。因此，当没有发布帖子时，我想显示 未找到帖子 消息。我通过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>
    )
    ```

【参考方案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> 
)

【参考方案2】：

在这种情况下，您可以使用condition operators。

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

【参考方案3】：

您可以使用if else 根据您的要求进行渲染。

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 在这里看起来更易读。