React map - 如果缺少则不返回项目

Question

我正在使用map in react来显示facebook帖子的提要，但如果json数据中缺少消息字段，我不希望该帖子呈现。

如果我这样做，我会收到一个错误（'如果'是一个意外的令牌），我的项目将无法构建

return (
        <Slider
          {...Settings}>
          {postsAvailable && posts.map((post, index) => (
            if (!post.message) return null
            return (<div key={post.id}>
              { index === 0 && <Item /> }
              { index > 0 && <div className='item'>
                <img data-original={post.full_picture} className='img-responsive' />
                <div className={`facebook-content slide-${post.id}`}>
                  <p className='text'>{post.message}</p>
                </div>
              </div> }
            </div>)
          ))}
        </Slider>
      )

Answer 1

你没有给你的功能给map一个身体。将()更改为{}，它将按预期工作。

return (
  <Slider {...Settings}>
    {postsAvailable &&
      posts.map((post, index) => {
        if (!post.message) return null;
        return (
          <div key={post.id}>
            {index === 0 && <Item />}
            {index > 0 && (
              <div className="item">
                <img
                  data-original={post.full_picture}
                  className="img-responsive"
                />
                <div className={`facebook-content slide-${post.id}`}>
                  <p className="text">{post.message}</p>
                </div>
              </div>
            )}
          </div>
        );
      })}
  </Slider>
);

或者你可以filter所有的帖子先没有消息，然后map那些。

return (
  <Slider {...Settings}>
    {postsAvailable &&
      posts
        .filter(post => post.message)
        .map((post, index) => (
          <div key={post.id}>
            {index === 0 && <Item />}
            {index > 0 && (
              <div className="item">
                <img
                  data-original={post.full_picture}
                  className="img-responsive"
                />
                <div className={`facebook-content slide-${post.id}`}>
                  <p className="text">{post.message}</p>
                </div>
              </div>
            )}
          </div>
        ))}
  </Slider>
);

Answer 2

你可以先使用filter：

posts.filter((post) => post.message).map((post, index) => (...

虽然，如果可能，您应该在获得帖子时进行过滤，而不是在渲染功能中进行过滤。尽可能少地使用渲染功能 - 以获得良好的概览和性能。