Question

我需要在不同的按钮单击上加载不同的API网址：

这是API组件：

const companiesUrl = "http://localhost:3005/local-companies-xxx";

class Companies extends Component {
    state = {
        companyDetails: [],
        currentPage: 0
    };


    get items() {
        const {currentPage, companiesDetails} = this.state;
        return companiesDetails.slice(currentPage * 3, currentPage * 3 + 3)
    }

    changeCurrentPage = (i) => {
        this.setState({
            currentPage : i
        })
    };

    componentDidMount() {
        fetch(companiesUrl)
            .then(data => data.json())
            .then(info => this.setState({companiesDetails: info}))
            .catch(error => console.error("error connecting to the api"));
    } 
 [more code... removed because not really necessary to show right now]

这是按钮Component：

class HomeButton extends Component {

    render() {
        return (
            <div className="button" onClick={this.props.passClick}>
                <p>{this.props.buttonText}</p>
            </div>
        )
    }

}
export default HomeButton;

这是父母：

class WhomWeHelp extends Component {
    state = {
        count : 0
    };

    increment() {
        this.setState({
            count : this.state.count + 1
        })
    }

    render() {
        return (
            <section>
                <div>
                    <HomeButton buttonText="xxx" passClick={this.increment} />
                    <HomeButton buttonText="yyy" passClick={this.increment} />
                    <HomeButton buttonText="zzzz" passClick={this.increment} />
                </div>
                <div>
                    <Companies />
                </div>


            </section>
        )
    }
}


export default WhomWeHelp;

如您所见，我尝试将onClick={this.props.passClick}添加到按钮Component上，并使用passClick={this.increment}将点击传递给Parent，以便它运行方法

increment() {
    this.setState({
        count : 0
    })
}

然后，我想将此状态转移到API组件，并为每个不同的按钮加载不同的API网址。按钮xxx应该使用xxx网址加载api，按钮yyy应该加载yyy公司，而zzz zzz公司。

但是，当我单击三个按钮时，我得到WhomWeHelp.jsx:13 Uncaught TypeError: Cannot read property 'setState' of undefined at increment...

为什么我会收到这样的错误？如果不是this.setstate，我将控制台日志放在increment() {}内就可以了。

还有一种更好的方法来实现我正在做的事情，避免将点击从子级传递到父级，然后将状态从父级传递到API子级吗？

谢谢

Answer 1

如果将console.log放在increment内可以正常工作，那么我想说您的this是问题，而您的this可能是{{1} }。我想这是一个范围问题。

尝试将undefined函数更改为箭头函数表达式，如下所示：

increment

对于针对不同的按钮单击发送不同的API请求的问题，您可以创建另一个箭头函数表达式作为绑定事件，并发送一个标志以确定应该为每个按钮选择哪个API。例如：

  increment = () => { 
    this.setState((state) => ({
      count: state.count + 1
    }));
  }

请查看以下可重现的示例，其中每个按钮都会执行不同的操作来更新状态：

React：如何在不同的按钮单击上加载不同的API

1 个答案: