Как показать сообщение, когда в ленте пользователя нет сообщений в React redux?

Question

Прямо сейчас, если я go в свою ленту, где показываются списки постов. Итак, когда сообщений нет, я хочу показать сообщение Сообщения не найдены . Я получаю от isFetching и posts до mapStateToProps.

posts - это поле массива в редукторе, и его начальное состояние пусто. Итак, когда сообщений не делается, массив пуст.

Как мне показать сообщение?

  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

В этом случае вы можете использовать операторы условия .

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

Answer 2

Вы можете использовать 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 будет выглядеть здесь более читабельным.

Answer 3

Так же, как вы проверяете 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> 
)