Question

我正在尝试将(pyenv34) barikak@dev-dsk:~% python /home/barikak/workspace/py27sandbox/concurrency_vs_threading_vs_multiprocessing/threading_example.py 3.4.0 |Continuum Analytics, Inc.| (default, Mar 17 2014, 16:13:14) [GCC 4.1.2 20080704 (Red Hat 4.1.2-54)] 2018-07-31 17:22:41,863 INFO __main__ 22009/140545970165504: Starting script for # of jobs: 2 running # of workers at a time 2... 2018-07-31 17:22:41,863 DEBUG __main__ 22009/140545970165504: Starting run_tasks_concurrently 2 tasks with pool_size 2 2018-07-31 17:22:41,863 DEBUG __main__ 22009/140545839482624: Thread: <Thread(Thread-1, started daemon 140545839482624)> is running: <function a_worker_fnc at 0x7fd360d8c6a8> with kwargs: {'x': 0} 2018-07-31 17:22:41,864 DEBUG __main__ 22009/140545758328576: Thread: <Thread(Thread-2, started daemon 140545758328576)> is running: <function a_worker_fnc at 0x7fd360d8c6a8> with kwargs: {'x': 1} 2018-07-31 17:22:41,864 DEBUG __main__ 22009/140545970165504: Waiting for tasks 0->2 to finish out of total 2 tasks 2018-07-31 17:22:41,869 DEBUG __main__ 22009/140545970165504: runtime for run_tasks_concurrently: 0:00:00.005774 result length: 2 [0, 1] 0:00:00.006079 (pyenv34) barikak@dev-dsk:~%类方法传递到名为changePage的子组件中。当子组件中的SideBar事件触发changePage方法时，我收到以下错误：

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

根据我在其他类似文章中可以找到的内容，我需要将onClick方法绑定到此。我已经做到了，但是我仍然无法获得工作。

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

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

父组件称为Main：

changePage

子组件：

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>
		)
	}	
}

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），并删除构造函数中的绑定体操。

this.setState React绑定问题

2 个答案: