警告：函数作为React子函数无效。如果从呈现返回组件而不是＜Component/＞，则可能会发生这种情况

Question

我是新手，我正在使用非官方的哈利波特api构建一个应用程序。

这是应用程序:

import axios from 'axios'
import { Link } from 'react-router-dom'

class HouseHistoryCard extends React.Component {
  constructor() {
    super()
    this.state = {
      househistory: {}
    }
  }

  componentDidMount() {
    const id = this.props.match.params.id
    axios.get(`https://www.potterapi.com/v1/houses/${id}?key=XXXXX`)

      .then(res => this.setState({ househistory: res.data }))
      .catch(err => console.log(err))
  }

  CapitlizeString() {
    return word.charAt(0).toUpperCase() + word.slice(1)
  }

  render() {
    console.log('char', this.state.househistory)
    return (
      <section className="single-househistory hero is-fullheight">
        <div className="tile is-ancestor">
          <div className="tile is-vertical is-4">
            <div className="tile">
              <div className="tile is-parent is-vertical">
                <article className="tile is-child notification">
                  <p className="title">School: {this.state.househistory.school}</p>
                  <p className="subtitle">Head of house: {this.state.househistory.headOfHouse}</p>
                </article>
                <article className="tile is-child notification">

                  <p className="title ">Mascot {this.state.househistory.mascot}</p>
                  <p className="title">Colors {this.state.househistory.colors}</p>

                </article>
              </div>
            </div>
            <div className="tile is-parent">
              <article className="tile is-child notification">

                <p className="subtitle">House Ghost {this.state.househistory.houseGhost}</p>
                <p className="subtitle">House colors: {this.state.househistory.colors}</p>          
                <div className="content">

                </div>
              </article>
            </div>
          </div>
          <div className="tile is-parent">
            <article className="tile is-child notification">
              <div className="content">
                <p className="title">house name {this.state.househistory.name}</p>

                <p className="title">founder: {this.state.househistory.founder}</p>
                <p className="subtitle"> House values: {this.state.househistory.values}</p>
                <div className="content">
                  <div className="tile is-parent">
                    <article className="tile is-child notification">
                      <figure className="image is-3by3">
                        <img src="https://i.imgur.com/sIuqs9a.jpg" />
                        <p className="subtitle"> {this.state.househistory.founder} founded this great house. It is said, {this.state.househistory.founder} valued {this.state.househistory.values} and wanted those who shared those values to enter their founding house.</p>
                        {/* <p className="subtitle">Hall of Fame: {this.state.househistory.members} </p> */}
                        {/* <p className="subtitle">When {this.state.househistory.name} first encountered a Boggart, it revealedtheir worst fears- {this.state.househistory.boggart}!</p> */}
                        <p className="subtitle"> {this.state.househistory.name} Hall of Fame: {this.state.househistory.members} </p>

                      </figure>
                    </article>
                  </div>
                  {/* <!-- Content --> */}
                </div>
              </div>
            </article>
          </div>
        </div>
        <Link to="/houses">
          <div className="box has-text-centered button is-black center">
                          Return to hogwarts history
          </div>
        </Link>
      </section>
    )
  }
}

export default HouseHistoryCard

当我登录控制台时，来自API的JSON响应成功显示，但是我在渲染输出时遇到了问题。我正在使用Bulma进行前端样式。

这在我的app.js中

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import { Link } from 'react-router-dom'

import axios from 'axios'
// import Auth from './lib/auth'


import 'bulma'
import './styles/styles.scss'


import HouseHistory from './components/HouseHistory'
import HouseHistoryCard from './components/HouseHistoryCard'


const App = () => (
  <BrowserRouter>
    <NavBar />

    <Switch>
      <Route exact path="/houses" component={HouseHistory} />
      <Route exact path="/houses/:id" component={HouseHistoryCard} />      
    </Switch>


  </ BrowserRouter>
)

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

这是错误消息：

后端。js:6警告：函数作为React子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者你想调用这个函数而不是返回它。在p中（由HouseHistoryCard创建）在文章中的div（由House Historycard创建）中（由HouseHistoryCard创建），在div中（由HOUSeHistory卡创建）在节中（由豪斯历史卡创建），在HouseHistoryCard中（由Context.Consumer创建），在路由中（由应用程序创建），在路由器中（由BrowserRouter创建），在BrowserRoutor中（由应用程序创建）应用程序中

奇怪的是，我一直在为另一个页面使用相同的格式，以便轻松获取数据。在这种情况下，我做错了什么？任何帮助都将不胜感激。

Answer 1

我没有访问地图中的[0]索引——这是我的react和javascript之旅的早期阶段，但我希望这能帮助任何刚开始的人。