Javascript instance.render不是一个函数。（功能组件）
这是我的第一篇文章 我已经读了很多关于功能组件的书，并尝试了我能做的一切，但在我的案例中似乎什么都不起作用。我正在获取Javascript instance.render不是一个函数。（功能组件）,javascript,reactjs,react-props,react-functional-component,Javascript,Reactjs,React Props,React Functional Component,这是我的第一篇文章 我已经读了很多关于功能组件的书，并尝试了我能做的一切，但在我的案例中似乎什么都不起作用。我正在获取实例。渲染不是一个函数 希望你们中的一些人能看到我的错误在哪里，因为我对编程非常陌生。这是我的代码： App.js import React, { useEffect, useState } from 'react'; import './App.css'; import Login from "./components/Login" import Feed
实例。渲染不是一个函数import React, { useEffect, useState } from 'react';
import './App.css';
import Login from "./components/Login"
import Feed from "./components/Feed"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
const App = () => {
const [isLoggedIn, setLoggedIn] = useState(false)
const handleLogin = token => {
if (!token) return
localStorage.setItem('token', token)
setLoggedIn(true)
}
const handleLogout = () => () => {
setLoggedIn(false)
localStorage.clear()
}
return (
<div className="App">
<Router>
<Feed isLoggedIn={isLoggedIn} logout={handleLogout} />
<Switch>
<Route
exact
path='/login'
component={(props) => (
<Login {...props} onLogin={handleLogin} />
)}>
</Route>
</Switch>
</Router>
</div>
)
}
export default App;
import React from "react"
import axios from "axios"
import { Button, Form, FormGroup, Input } from 'reactstrap'
import "../css/Login.css"
import { Link, BrowserRouter as Router, Switch, Route } from "react-router-dom"
import Signin from "./Signin"
class Login extends React.Component {
constructor (props) {
super(props)
this.state = {
user_name: "",
password: "",
error: false,
loggedIn: false,
}
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value,
})
}
login = (event) => {
event.preventDefault()
const { user_name, password } = this.state
axios("http://localhost:7001/api/login", {
method: "POST",
data: {
user_name,
password
}
})
.then((response) => {
this.props.onLogin(response.data.token)
this.setState({ loggedIn: true })
this.feedRedirect()
console.log(response.data)
})
.catch((error) => {
console.log(error)
})
this.setState({
user_name: "",
password: "",
error: false,
})
}
feedRedirect = () => {
this.props.history.push('/feed')
}
render() {
const { user_name, password, error, loggedIn } = this.state
return (
<div className="login">
<Form className="login-container" onSubmit={this.login}>
<FormGroup>
<Input
value={this.state.user_name}
onChange={this.handleChange}
name="user_name"
type="text"
className="form-control mb-2"
placeholder="Username"
/>
</FormGroup>
<FormGroup>
<Input
value={this.state.password}
onChange={this.handleChange}
name="password"
type="password"
className="form-control mb-2"
placeholder="Password"
/>
</FormGroup>
<Button className="button-login" disabled={!user_name || !password}>
Log in
</Button>
<hr />
<Router>
<Link to="/signin"> Don't have an account? Sign up here</Link>
<Switch>
<Route path="/signin" component={Signin}>
</Route>
</Switch>
</Router>
</Form>
</div>
)
}
}
export default Login;
import React，{useffect，useState}来自“React”；
导入“/App.css”；
从“/components/Login”导入登录名
从“/components/Feed”导入源
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}
常量应用=（）=>{
const[isLoggedIn，setLoggedIn]=useState（false）
const handleLogin=令牌=>{
如果（！令牌）返回
localStorage.setItem（'token'，token）
setLoggedIn（真）
}
常量handleLogout=（）=>（）=>{
setLoggedIn（假）
localStorage.clear（）
}
返回(
(
)}>
)
}
导出默认应用程序；
import React, { useEffect, useState } from 'react';
import './App.css';
import Login from "./components/Login"
import Feed from "./components/Feed"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
const App = () => {
const [isLoggedIn, setLoggedIn] = useState(false)
const handleLogin = token => {
if (!token) return
localStorage.setItem('token', token)
setLoggedIn(true)
}
const handleLogout = () => () => {
setLoggedIn(false)
localStorage.clear()
}
return (
<div className="App">
<Router>
<Feed isLoggedIn={isLoggedIn} logout={handleLogout} />
<Switch>
<Route
exact
path='/login'
component={(props) => (
<Login {...props} onLogin={handleLogin} />
)}>
</Route>
</Switch>
</Router>
</div>
)
}
export default App;
import React from "react"
import axios from "axios"
import { Button, Form, FormGroup, Input } from 'reactstrap'
import "../css/Login.css"
import { Link, BrowserRouter as Router, Switch, Route } from "react-router-dom"
import Signin from "./Signin"
class Login extends React.Component {
constructor (props) {
super(props)
this.state = {
user_name: "",
password: "",
error: false,
loggedIn: false,
}
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value,
})
}
login = (event) => {
event.preventDefault()
const { user_name, password } = this.state
axios("http://localhost:7001/api/login", {
method: "POST",
data: {
user_name,
password
}
})
.then((response) => {
this.props.onLogin(response.data.token)
this.setState({ loggedIn: true })
this.feedRedirect()
console.log(response.data)
})
.catch((error) => {
console.log(error)
})
this.setState({
user_name: "",
password: "",
error: false,
})
}
feedRedirect = () => {
this.props.history.push('/feed')
}
render() {
const { user_name, password, error, loggedIn } = this.state
return (
<div className="login">
<Form className="login-container" onSubmit={this.login}>
<FormGroup>
<Input
value={this.state.user_name}
onChange={this.handleChange}
name="user_name"
type="text"
className="form-control mb-2"
placeholder="Username"
/>
</FormGroup>
<FormGroup>
<Input
value={this.state.password}
onChange={this.handleChange}
name="password"
type="password"
className="form-control mb-2"
placeholder="Password"
/>
</FormGroup>
<Button className="button-login" disabled={!user_name || !password}>
Log in
</Button>
<hr />
<Router>
<Link to="/signin"> Don't have an account? Sign up here</Link>
<Switch>
<Route path="/signin" component={Signin}>
</Route>
</Switch>
</Router>
</Form>
</div>
)
}
}
export default Login;
从“React”导入React
从“axios”导入axios
从“reactstrap”导入{Button，Form，FormGroup，Input}
导入“./css/Login.css”
从“react Router dom”导入{Link，BrowserRouter作为路由器，交换机，路由}
从“/Signin”导入登录
类登录扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
用户名：“”，
密码：“”，
错误：false，
洛格丁：错，
}
}
handleChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value，
})
}
登录=（事件）=>{
event.preventDefault（）
const{user_name，password}=this.state
axios（“http://localhost:7001/api/login", {
方法：“张贴”，
数据：{
用户名，
密码
}
})
。然后（（响应）=>{
this.props.onLogin（response.data.token）
this.setState（{loggedIn:true}）
this.feedRedirect（）
console.log（response.data）
})
.catch（（错误）=>{
console.log（错误）
})
这是我的国家({
用户名：“”，
密码：“”，
错误：false，
})
}
feedRedirect=（）=>{
this.props.history.push（“/feed”）
}
render（）{
const{user_name，password，error，loggedIn}=this.state
返回(
登录
没有帐户？在这里注册
)
}
}
导出默认登录；
任何帮助都将不胜感激。提前谢谢。您是否错过了会议？从“React”导入React；从“react dom”导入react dom；嘿，查理，谢谢你的回答，我在复制代码时一定错过了它们，但我的代码中有这样的它们：在App.js import React中，{useffect，useState}来自'React'；在Login.js import React from“React”@Guerreri88 No中，您复制了它们。当使用代码格式时，记得在“``后加一行新行。啊，好的@Calculuswhiz，我会记住的。谢谢；）@没问题。我一直在看。错误消息是否也会告诉您错误所在的文件/行？是否有其他错误消息？