react 在 if / else 语句中丢失状态

Jasper 发表于 Dev

碧玉

我真的在为以下代码中的状态而苦苦挣扎。我用“onClick”调用了一个函数。此函数已在组件的构造函数中绑定，但由于某种原因，事件处理程序中的“this.function”返回为“undefined”。

render() {

if (bla) {
  (...)
  return (
    <div>Loading</div>
  )
} else: {
  return (
    <div>
      <a onClick={this.activeorArchive}><h4>Archive</h4></a>
    </div>
}}

onClick 调用以下函数。

activeorArchive() {

  if (this.state.active === true) {
    this.setState((prevState, props) => ({
      assessments_list_url: prevState.assessment_list_url + 'archived=false' + "/"
    }))
    console.log(self.state.active)
  } else {
    this.setState((prevState, props) => ({
      assessments_list_url: prevState.assessment_list_url + 'archived=true' + "/"
    }))
    console.log(self.state.active)
  }
}

我不清楚我在这里做错了什么。过去我遇到过一个有点类似的问题，其中 return 语句是函数本身的一部分（通过将其转换为箭头函数来解决）。但是肯定必须有一种方法可以在 if/else 语句中保留状态？

更新

根据要求，构造函数：

constructor(props) {
    super(props);

    this.state = {
        assessments: '',
        categories: '',
        active: true,
        assessments_list_url: "/api/assessments/",
        categories_list_url: "/api/categories/"
      };

      this.getNewUrl = this.getNewUrl.bind(this);
      this.activeorArchive = this.activeorArchive.bind(this);

    };

mtshv

试试这个方法：

activeorArchive = () => {
    const newListURL = `/api/assessments/archived=${this.state.active ? 'false' : 'true'}`;
    this.setState({assessments_list_url: newListURL});
};

如果它对你有用，请告诉我:)

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。