Question

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

如果这样做，我会收到一个错误消息（“ 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

您可以先使用filter：

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

但是，如果可能的话，您应该在获取帖子时进行过滤，而不是在渲染功能中。在渲染功能中尽可能少地做-以获得良好的概述和性能。

Answer 2

您没有将功能赋予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>
);

反应地图-如果丢失则不退还物品

2 个答案: