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个ID为1,2,3,4,5,6,7,8,9,10的项目，我将其与ID为10进行比较。如果相同，那么我想返回下面的html，因此排除了其他项目。

但是，执行此操作时会发生错误，因为未显示任何内容，并且我在Chrome控制台中看到错误：

未捕获的错误：ColumScreen（...）：未返回任何内容从渲染。这通常意味着缺少return语句。或者不显示任何内容，返回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>
    );
  }
}

映射中的条件在ReactJS中产生错误

1 个答案: