Условие в карте выдает ошибку в ReactJS

Question

Я ставлю условие, что при его выполнении я возвращаю html в поле «Возврат».

Далее мой код будет

import React, { Component } from 'react'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import './style.css'

const query = gql`
  {
    posts {
      rows {
        id
        autor
        views
        tags {
          id
          titulo
        }
      }
      count
    }
  }
`

export class ColumScreen extends Component {
  constructor(props) {
    super(props)
    this.state = { currentIndex: 0 }
  }

  render() {
    //  const { autor } = props;

    const { data, first, id } = this.props
    if (data.loading) {
      return <div>Loading...</div>
    }
    if (data.error) {
      return <div>{data.error.message}</div>
    }
    const {
      data: {
        posts: { rows },
      },
    } = this.props

    rows.map((item, i) => {
      if (item.id === parseInt(id)) {
        return (
          <div className="containerAutor">
            <Link to="/#">
              <img alt="#" className="imagenAutor" src="#" />
              <div className="nombreAutor">{'Author'}</div>
            </Link>
          </div>
        )
      }
    })
  }
}

ColumScreen.propTypes = {
  autor: PropTypes.string,
}

ColumScreen.defaultProps = {
  autor: null,
}

const queryOptions = {
  options: props => ({
    variables: {
      id: props.id,
    },
  }),
}

export default graphql(query, queryOptions)(ColumScreen)

В части условия:при выполнении запроса есть несколько элементов, поэтому каждый item.id сравнивает его с id , который я отправляю компоненту.

Например, там10 элементов с идентификатором 1,2,3,4,5,6,7,8,9,10другие элементы.

Однако при этом возникает ошибка, поскольку ничего не отображается, и я вижу ошибку в консоли Chrome:

Uncaught Error: ColumScreen (...): Ничего не было возвращено из рендера.Обычно это означает, что отсутствует инструкция возврата.Или, чтобы ничего не отобразить, верните null.

Как я могу заставить эту работу работать?Я действительно не знаю, что происходит.

Спасибо!

Answer 1

Вы должны вернуть результат map, и вы также хотите сначала filter rows вместо выполнения оператора if внутри map.

export class ColumScreen extends Component {
  state = { currentIndex: 0 };

  render() {
    const { data, first, id } = this.props;

    if (data.loading) {
      return <div>Loading...</div>;
    }
    if (data.error) {
      return <div>{data.error.message}</div>;
    }

    const {
      data: {
        posts: { rows }
      }
    } = this.props;

    return (
      <div>
        {rows
          .filter(item => item.id === parseInt(id))
          .map((item, i) => (
            <div className="containerAutor" key={item.id}>
              <Link to="/#">
                <img alt="#" className="imagenAutor" src="#" />
                <div className="nombreAutor">{"Author"}</div>
              </Link>
            </div>
          ))}
      </div>
    );
  }
}