Javascript 未对此.setState（）调用render（）

我有一个简单的导航链接组件，在容器/表示类（Smart/dumb）中分开，如下所示：

我的表现成分：

import React, { PropTypes } from 'react';

class Navigation extends React.Component {

    componentWillReceiveProps() {
        console.log("here bro componentWillReceiveProps");
    }

    render() {
        console.log(this.props);
        var self = this;
        return (
            <div>
                <ul>
                    {
                        this.props.items.map( (m, index) => {
                            var style = '';

                            console.log("index", index, "focus", self.props.focused);
                            if(self.props.focused == index){
                                style = 'focused';
                            }
                            return <li key={Math.random()} className={style} onClick={self.props.clickHandler.bind(this, index)}>{m}</li>;
                        })
                    }
                </ul>

                <p>Selected: {this.props.items[this.props.focused]}</p>
            </div>
        );
    }
}

export default Navigation;

import React, {PropTypes} from 'react';
import Nav from '../components/Navigation';

class NavigationContainer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            focused : 0
        };
    }

    clicked(index) {
        this.setState({focused: index}, function () {
            console.log("set to", this.state.focused);
        });
    }

    render() {
        return (
            <Nav items={['Home', 'About', 'Contact Us']} clickHandler={this.clicked} focused={this.state.focused}/>
        );
    }
}

NavigationContainer.propTypes = {};
export default NavigationContainer;

import React，{PropTypes}来自'React'；
类导航扩展了React.Component{
组件将接收道具（）{
console.log（“此处bro组件将接收道具”）；
}
render（）{
console.log（this.props）；
var self=这个；
返回(

{
this.props.items.map（（m，index）=>{
var样式=“”；
日志（“索引”，索引，“焦点”，self.props.focused）；
if（self.props.focused==索引）{
风格=‘专注’；
}
return
{m}
；
})
}

所选：{this.props.items[this.props.focused]}

);
}
}
导出默认导航；

我的容器组件：

import React, { PropTypes } from 'react';

class Navigation extends React.Component {

    componentWillReceiveProps() {
        console.log("here bro componentWillReceiveProps");
    }

    render() {
        console.log(this.props);
        var self = this;
        return (
            <div>
                <ul>
                    {
                        this.props.items.map( (m, index) => {
                            var style = '';

                            console.log("index", index, "focus", self.props.focused);
                            if(self.props.focused == index){
                                style = 'focused';
                            }
                            return <li key={Math.random()} className={style} onClick={self.props.clickHandler.bind(this, index)}>{m}</li>;
                        })
                    }
                </ul>

                <p>Selected: {this.props.items[this.props.focused]}</p>
            </div>
        );
    }
}

export default Navigation;

import React, {PropTypes} from 'react';
import Nav from '../components/Navigation';

class NavigationContainer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            focused : 0
        };
    }

    clicked(index) {
        this.setState({focused: index}, function () {
            console.log("set to", this.state.focused);
        });
    }

    render() {
        return (
            <Nav items={['Home', 'About', 'Contact Us']} clickHandler={this.clicked} focused={this.state.focused}/>
        );
    }
}

NavigationContainer.propTypes = {};
export default NavigationContainer;

import React，{PropTypes}来自'React'；
从“../components/Navigation”导入导航；
类NavigationContainer扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
重点：0
};
}
单击（索引）{
this.setState（{focused:index}，函数（）{
log（“设置为”，this.state.focused）；
});
}
render（）{
返回(
);
}
}
NavigationContainer.propTypes={}；
导出默认导航容器；

---

当单击任何项目（主页、联系我们…等）并修改状态时，不会再次调用render（）方法，因此传递给dumb组件的道具是最新的。我的理解是，当状态发生变化时，就会调用render（）。我做错了什么？

当您使用ES2015类语法扩展

React.Component
时，您需要将动作处理程序绑定到类的上下文

试试这个：

render() {
        return (
            <Nav items={['Home', 'About', 'Contact Us']} clickHandler={index => this.clicked(index)} focused={this.state.focused}/>
        );
    }

它不是ES2015规范的一部分，但支持此语法

您可以在React中阅读有关上下文绑定的更多信息
是否确定在单击的
中调用了
this.setState
？在我看来，您需要绑定
这个。在
clickHandler
中单击了
。什么是索引？看起来您转发了clickHandler，但是您将
this
绑定到了dumb组件，那么您在哪里设置您的状态呢？：）只是想知道arrow函数如何帮助不创建许多副本？您是对的，在本例中arrow函数将用作绑定，因此最好还是将其移动到构造函数中。对我来说，它看起来更干净。我不能说这是一个明显的表现胜利。