javascript - instance.render is not a function 错误在reactjs

Question

我在 reactjs 中遇到一个非常不寻常的错误，它说 instance.render 不是 reactjs 中的函数。我无法追踪错误。这是 index.js 文件和我在组件中唯一的其他文件。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import SearchBar from './components/search_bar.js';
const API_KEY='AIzaSyA4c4bzl1At2c0IAJXU939D1vAIUwAn3Ss';
const App = ()=>{
  return(
     <div>
      <SearchBar/>
     </div>
  );
}



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

这是 components 文件夹中 Searchbar 中的 search_bar.js。

import React, { Component } from 'react';
class SearchBar extends React.Component{
  constructor(props){
     super(props);
     this.state={
       term:''
     };
     this.onInputchange=this.onInputchange.bind(this);
  }

  onInputchange(event){
   console.log(event);
  }
  render(){
     return(
        <div className="search_bar">
         <input
             onChange={this.onInputchange}
         />
         </div>
     );
   }

}
export default SearchBar;

Answer 1

问题出在您的 App 元素上。要么调用该函数，要么尝试像 React Cmopnent 一样构建它，这应该会修复它。在 Code Pen 为我工作

class App extends React.Component
{
  render()
  {
      return(
       <div>
        <SearchBar/>
       </div>
    );
  }
}

它试图在您的 App 上调用 render，因为您将其结构化为 React JSX 组件。但实际上它是一个函数。你也可以只调用 App 而不是像 JSX 那样设置它

ReactDOM.render(App(), document.getElementById('root'));

但我会坚持使用第一种方法。更容易理解发生了什么