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

Question

我无法调用.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

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

score 4 · Accepted Answer

更改您当前的代码，如下所示。

目前：（不正确）

this.setState = {key: value}

正确的：

this.setState({key: value})

score 4 · Accepted Answer

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

所以而不是：

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

试试吧：

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

score -1 · Accepted Answer

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

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

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

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

this.setState({ newState })

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

3 回答 3

Related

Reference