Javascript TypeError:无法读取属性'；绑定&x27；ReactJS中未定义的
我不能调用Javascript TypeError:无法读取属性'；绑定&x27；ReactJS中未定义的,javascript,html,reactjs,Javascript,Html,Reactjs,我不能调用.bind（this）来设置变量的状态。当我尝试更改调用我的.bind的方式时，它将正常运行，但页面上的任何内容都不会更改或受到影响 import React, { Component } from 'react' //import { Link } from 'react-router-dom'; import './Farmer.css'; export class FarmerProfile extends Component { constructor(props)
.bind（this）.bindimport React, { Component } from 'react'
//import { Link } from 'react-router-dom';
import './Farmer.css';
export class FarmerProfile extends Component {
constructor(props) {
super(props);
this.state = { isHome: true, isReservations: false, isUpdateFarm: false, isCurrentCrops: false};
}
showHomeBox(){
this.setState = { isHome: true, isReservations: false, isUpdateFarm: false, isCurrentCrops: false};
}
showReservationsBox (){
this.setState = { isHome: false, isReservations: true, isUpdateFarm: false, isCurrentCrops: false};
console.log("tried");
}
showUpdateFarmBox(){
this.setState = { isHome: false, isReservations: false, isUpdateFarm: true, isCurrentCrops: false};
}
showCurrentCropsBox(){
this.setState = { isHome: false, isReservations: false, isUpdateFarm: false, isCurrentCrops: true};
}
render() {
return (
<html lang="en">
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'/>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
<title>Farmer Profile Page</title>
</head>
<body>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"></link>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<button type="button" class="btn btn-primary" onClick= {this.showReservationsBox.bind(this)}>Primary</button>
<div class="container">
<div class="row profile">
<div class="col-md-3 border">
<div class="profile-sidebar">
<div class="profile-userpic">
<img src="https://k48b9e9840-flywheel.netdna-ssl.com/wp-content/uploads/2020/04/COVID-19-Relief_Small-Farms--1024x614.jpg" class="img-responsive" alt=""></img>
</div>
<div class="profile-usertitle">
<div class="profile-usertitle-farmname">
Farm Name
</div>
<div class="profile-usertitle-farmemail">
farmEmail@gmail.com
</div>
</div>
<div class="profile-userbuttons">
<button type="button" class="btn btn-success btn-sm">Follow</button>
<button type="button" class="btn btn-danger btn-sm">Message</button>
</div>
<div class="profile-usermenu">
<ul class="nav">
<li class="active">
<a href="#home" onClick={this.showHomeBox.bind(this)}>
<i class="glyphicon glyphicon-home"></i>
Home </a>
</li>
<li>
<a href="#reservations" onClick={this.showReservationsBox.bind(this)}>
<i class="glyphicon glyphicon-calendar"></i>
Reservations </a>
</li>
<li>
<a href="#update" onClick={this.showUpdateFarmBox().bind(this), console.log("CLICK")}>
<i class="glyphicon glyphicon-upload"></i>
Update Farm </a>
</li>
<li>
<a href="#crops" onClick={this.showCurrentCropsBox.bind(this)}>
<i class="glyphicon glyphicon-grain"></i>
Current Crops </a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<div class="active-selection-content">
{this.state.isHome && <HomeBox />}
{this.state.isReservations && <ReservationsBox />}
{this.state.isCurrentCrops && <CurrentCropsBox />}
{this.state.isUpdateFarm && <UpdateFarmBox />}
</div>
</div>
</div>
</div>
</body>
</html>
)
}
}
class HomeBox extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
render(){
return(
<div>Home Box</div>
);
}
}
class ReservationsBox extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
render(){
return(
<div>Reservations Box</div>
);
}
}
class UpdateFarmBox extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
render(){
return(
<div>Update Farm Box</div>
);
}
}
class CurrentCropsBox extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
render(){
return(
<div>Current Crops Box</div>
);
}
}
export default FarmerProfile
import React，{Component}来自“React”
//从'react router dom'导入{Link}；
导入“/Farmer.css”；
导出类FarmerProfile扩展组件{
建造师（道具）{
超级（道具）；
this.state={isHome:true，isReservations:false，isUpdateFarm:false，isCurrentCrops:false}；
}
showHomeBox（）{
this.setState={isHome:true，isReservations:false，isUpdateFarm:false，isCurrentCrops:false}；
}
showReservationsBox（）{
this.setState={isHome:false，isReservations:true，isUpdateFarm:false，isCurrentCrops:false}；
控制台日志（“尝试”）；
}
showUpdateFarmBox（）{
this.setState={isHome:false，isReservations:false，isUpdateFarm:true，isCurrentCrops:false}；
}
showCurrentCropBox（）{
this.setState={isHome:false，isReservations:false，isUpdateFarm:false，isCurrentCrops:true}；
}
render（）{
返回(
农民个人资料页
主要的，重要的
农场名称
farmEmail@gmail.com
跟随
消息
-
-
-
-
{this.state.isHome&&}
{this.state.isReservations&&}
{this.state.isCurrentCrops&&}
{this.state.isUpdateFarm&&}
)
}
}
类HomeBox扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(
主页框
);
}
}
类ReservationsBox扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(
预订箱
);
}
}
类UpdateFarmBox扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(
更新服务器场框
);
}
}
类CurrentCropBox扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(
当前作物箱
);
}
}
导出默认FarmerProfile
我尝试过改变我定义函数的方式，调用函数的方式，检查应该调用哪个页面的方式。我不明白为什么它不允许我将此绑定到状态您以错误的方式设置状态
setStatethis.setState = { isHome: false, isReservations: true, isUpdateFarm: false, isCurrentCrops: false };
this.setState({
isHome: false,
isReservations: true,
isUpdateFarm: false,
isCurrentCrops: false
});
更改当前代码，如下所示 目前：（不正确） 正确：
this.setState({key: value})
很抱歉，我找不到您面临的问题所在的
.bind（）（）=>{}这个保持在类级别，而不是在某些用例（react处理程序）中的DOM级别。也许如果你能评论一下你面临的问题，我可以帮你更好
而且，
我发现您正在使用this.setState={newState}
this.setState
是一个函数，您将更新的状态作为参数传递给this.setState
this.setState（{newState}）
此.setState
是一个函数。把它改成this.setState（{}）
Dang，我想我已经试过了，但我猜没有。这就解决了，谢谢
this.setState({key: value})