还有一个......函数作为 React 子级无效答案

【问题标题】：Yet another... Functions are not valid as a React child还有一个......函数作为 React 子级无效
【发布时间】：2022-01-04 18:42:06
【问题描述】：

好的，所以我加载了根 URL。应该呈现一个帖子列表，而不是我得到臭名昭著的 React 错误......

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

index.js 和 app.js 似乎可以正确呈现。我相信故障出在 PostList 组件中，也许是渲染方法？我知道解决方案可能很简单，但我看不到它。

index.js

  7
  8 ReactDOM.render(
  9     <React.StrictMode>
 10         <HashRouter>
 11             <App />
 12         </HashRouter>
 13     </React.StrictMode>,
 14     document.getElementById('root')
 15 );
 16
 17 
 18 
 19 
 20 reportWebVitals();

app.js

  8
  9 class App extends React.Component {
 10
 11     constructor() {
 12         super();
 13         this.state = {
 14             posts: []
 15         };
 16     }
 17
 18     componentDidMount() {}
 19
 20     render() {
 21         return (
 22             <div className="container">
 23                 <h1>hello world</h1>
 24                 <Routes>
 25                     <Route exact path='/' element={PostList} />
 26                     <Route path='/post/:id' element={Post} />
 27                 </Routes>
 28             </div>
 29         );
 30     }
 31 }
 32
 33 export default App;

post-list.js

  5
  6 class Post extends React.Component {
  7     constructor() {
  8         super();
  9         this.state = {
 10             title: '',
 11             content: ''
 12         };
 13     }
 14
 15     componentDidMount() {
 16         let api = new Api();
 17
 18         api.posts(this.props.match.params.id).then(data => {
 19             this.setState({
 20                 title: data.title.rendered,
 21                 content: data.content.rendered
 22             });
 23         });
 24     }
 25
 26     render() {
 27         let post = this.state;
 28         return (
 29             <div className='row'>
 30                 <h3>{post.title}</h3>
 31                 <div dangerouslySetInnerHTML={{__html: post.content}} />
 32             </div>
 33         );
 34     }
 35 }
 36
 37 class PostList extends React.Component {
 38     constructor() {
 39         super();
 40         this.state = {
 41             posts: []
 42         };
 43     }
 44
 45     componentDidMount() {
 46         let api = new Api();
 47
 48         api.posts().then(data => {
 49             this.setState({
 50                 posts: data
 51             });
 52         });
 53     }
 54
 55     render() {
 56         let posts = this.state.posts.map((post, index) =>
 57             <h3 key={index}>
 58                 <Link to={`/post/${post.id}`}>{post.title.rendered}</Link>
 59             </h3>
 60         );
 61
 62         return (
 63             <div>{posts}</div>
 64         );
 65     }
 66 }
 67
 68 export {Post, PostList}

【问题讨论】：

app.js的第25、26行应该是<Route exact path="/mypath" element={<PostList />} />。注意</>。你写了Post 和PostList 而不是<Post /> 和<PostList />。
这能回答你的问题吗？ Functions are not valid as a React child. This may happen if you return a Component instead of from render

标签： reactjs

【解决方案1】：

显然你在配置路由时遇到了问题

可以查看React Routerhttps://reactrouter.com/docs/en/v6/getting-started/overview文档中配置路由的部分

尝试替换 app.js 文件中第 25 行和第 26 行的 PostList 和 Post，如下所示

<Route exact path='/' element={<PostList/>} />
<Route path='/post/:id' element={<Post/>} />

【讨论】：