React 地图 - 如果缺少，不要 return 项目

Question

我在 React 中使用地图来显示 facebook post 的提要，但如果 [=17] 中缺少消息字段，我不希望 post 呈现=] 数据。

如果我这样做，我会得到一个错误（'if' 是一个意外的标记）并且我的项目将无法构建

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 赋予的功能赋予 body。将 () 更改为 {}，它将按预期工作。

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) => (...

尽管如此，如果可能，您应该在获取帖子时进行过滤，而不是在呈现函数中进行过滤。尽可能少地在渲染函数中执行操作 - 以获得良好的概览和性能。

React 地图 - 如果缺少，不要 return 项目

React map - don't return item if missing

javascript

facebook-graph-api

reactjs