TypeError：无法读取 ReactJS 中未定义的属性“绑定”答案

【问题标题】：TypeError: Cannot read property 'bind' of undefined in ReactJSTypeError：无法读取 ReactJS 中未定义的属性“绑定”
【发布时间】：2020-10-27 13:07:46
【问题描述】：

我不能在我用来设置变量状态的任何函数上调用.bind(this)。当我尝试更改调用 .bind 的方式时，它会正常运行，但页面上的任何内容都不会改变或受到影响。

import 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

我尝试改变定义函数的方式、调用函数的方式以及检查应该调用哪个页面的方式。我不明白为什么它不允许我将它绑定到状态

【问题讨论】：

this.setState 是一个函数。将其更改为this.setState({})

标签： javascript html reactjs

【解决方案1】：

如下更改您当前的代码。

当前：（不正确）

this.setState = {key: value}

正确：

this.setState({key: value})

【讨论】：

【解决方案2】：

您以错误的方式设置状态。 setState 是一个方法，而不是一个属性，这意味着你必须将它作为一个方法调用并传递参数给它。

所以而不是：

this.setState = { isHome: false, isReservations: true, isUpdateFarm: false, isCurrentCrops: false };

试试吧：

this.setState({
  isHome: false,
  isReservations: true,
  isUpdateFarm: false,
  isCurrentCrops: false
});

【讨论】：

当，我以为我已经尝试过了，但猜不到。解决了，感谢它

【解决方案3】：

抱歉，我无法找到您遇到问题的.bind()，

但也许一种可能的解决方案是使用箭头函数() => {}

箭头函数总是将this 保持在类级别，而不是在某些用例（react-handlers）中的 DOM 级别。也许如果您可以评论您面临问题的特定行，我可以提供更好的帮助！

另外，我发现您使用的是this.setState = { newState } this.setState 是一个函数，你将更新后的状态作为参数传递给this.setState，

this.setState({ newState })

【讨论】：