reactjs - 警告：函数作为 React 子级无效。如果您返回 Component 而不是<component>从渲染</component>

问题描述

我是新手，我正在使用非官方的哈利波特 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')
)

这是错误消息：

backend.js:6 警告：函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。in p（由 HouseHistoryCard 创建） in div（由 HouseHistoryCard 创建） in article（由 HouseHistoryCard 创建） in div（由 HouseHistoryCard 创建） in div（由 HouseHistoryCard 创建） in section（由 HouseHistoryCard 创建） in HouseHistoryCard（由 Context.Consumer 创建） ) 在 Route（由 App 创建）在 Switch（由 App 创建）在 Router（由 BrowserRouter 创建）在 BrowserRouter（由 App 创建）在 App 中

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

标签： reactjsapimern

reactjs - 警告：函数作为 React 子级无效。如果您返回 Component 而不是从渲染

问题描述

解决方案

推荐阅读