Реагировать на карту - не возвращать предмет, если пропал

Question

Я использую карту реагирования, чтобы показать фид постов в 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 first:

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>
);