Question

我是新手React js，我不知道下面的代码有什么问题，但我得到的setState不是函数错误。请帮我解决这个问题。

class AppBarLayout extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        visibleSideBar:true,
        slide:""
      }
  }
  showProfile(){

    this.setState({
        slide:'slide'
    });
    console.log(this.state.slide);
  }
  render(){
    return(
            <div>
        <header>
          <NavBar show={this.showProfile}/>
          <Profile slide={this.state.slide} />
        </header>
      </div>
    );
  }
}
export default AppBarLayout;

Answer 1

您需要在组件构造函数

中绑定this.showProfile

this.showProfile = this.showProfile.bind(this)

有关此问题的详细信息，请参阅React doc的处理事件页面：https://facebook.github.io/react/docs/handling-events.html

Answer 2

如果你不想绑定构造函数中的每个函数，可以扩展Delapouite的答案，你可以使用箭头函数自动绑定到正确的上下文。

例如：

class AppBarLayout extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        visibleSideBar:true,
        slide:""
      }
  }

  // Now showProfile is an arrow function
  showProfile = () => {
    this.setState({
        slide:'slide'
    });
    console.log(this.state.slide);
  }

  render(){
    return(
      <div>
        <header>
          <NavBar show={this.showProfile}/>
          <Profile slide={this.state.slide}/>
        </header>
      </div>
    );
  }
}
export default AppBarLayout;

Answer 3

就我而言，我没有约束就解决了问题。

声明这样的方法是产生错误：

  async onSubmit(e) {
     event.preventDefault();
     this.setState({ shopEthereumAddress: e.target.id });
  }

不会产生错误的CORRECT声明是：

onSubmit = async event => {
    event.preventDefault();
    this.setState({ shopEthereumAddress: event.target.id });
}

这很有效。

Answer 4

toggleSwitch() {
    this.setState({
        name: 'Ram ji'
    });
}

使用箭头功能可将this的上下文设置为父范围。箭头功能除了更简洁之外，其主要优点是

主要好处：“ this”没有约束力

// use this arrow function instead of
toggleSwitch = () => {
    this.setState({
        name: 'Ram ji'         //It's working
    });
}

Reactjs this.setState不是函数错误

4 个答案: