this.setState React绑定问题

Question

我试图将changePage类方法传递到名为SideBar的子组件中。 当子组件中的onClick事件触发changePage方法时，我收到以下错误：

未捕获的TypeError：this.SetState不是函数

从其他类似的帖子中可以找到，我需要将changePage方法绑定到此。 我已经做到了，但是我仍然无法获得工作。

我也看到了很多建议将ES6箭头功能用于我的方法，但是如果我这样做的话，我会得到完全相同的错误消息。

我在Web开发方面还很陌生，我们将不胜感激。

父组件称为Main：

 import React from 'react'; import Content from './Content'; import Sidebar from './Sidebar'; export default class Main extends React.Component { constructor(props) { super(props); this.state = { selectedPage: 'home', pages: ['home','about','skills','contact'], }; this.changePage = this.changePage.bind(this); } changePage(page) { console.log(page); this.SetState({ selectedPage: page, pages: ['home','about','skills','contact'] }); }; render() { return ( <div> <div id="sidebar" className="side-bar"> <Sidebar changePage={this.changePage} selectedPage={this.state.selectedPage} pages={this.state.pages} /> </div> <div id="main" className="main-content"> <Content selectedPage={this.state.selectedPage} /> </div> </div> ) } } 

子组件：

 import React from 'react'; export default class Sidebar extends React.Component { render() { console.log("content props",this.props); const buttons = this.props.pages.map(button => <span className='nav-button' id={button} key={button} onClick={() => this.props.changePage(button)} > <img src={`./app/images/${button}.svg`} /> </span> ); return ( <div> <span> <img className='headshot' src='./app/images/headshot.jpg' /> </span> <div className='nav-container'> {buttons} </div> </div> ) } } 

Answer 1

您有语法错误： this.SetState 。 将其更改为this.setState 。

Answer 2

中的setState的拼写错误造成的错误，但你可能要考虑一个更清洁的方式父绑定this对changePage道具。 您的方式可行，但是如果您将侧边栏组件包含更改为：

<Sidebar
    changePage={ (page) => this.changePage(page)}
    selectedPage={this.state.selectedPage}
    pages={this.state.pages}
/>

这样可以使事情更清楚（changePage prop是一个函数，它接受一个参数并将该参数传递给实例方法this.changePage），并删除构造函数中的绑定体操。