为什么 this.state.name 没有在我的组件中正确使用？

Question

我有一个 teamName 存储，它存储团队的名称，并根据是否单击/悬停名称进行更改。

TeamStore.js：

function setName(name) {
    _team = name;
    _original = name;
}

//set a temp team name when sidemenu item is being hovered
function setHover(team) {
    _original = _team;
    _team = team;
}

function removeHover() {
    //console.log(_original);
    _team = _original;
}

我还有ThumbNail.jsx，它监听这个商店并在this.state.name 更改时触发_updateArticle 方法。但是，它无法正常工作。

• 当项目被悬停时，文章不会改变。
• 文章更改为悬停离开时悬停的项目（他们不应该这样做），它们应该返回到被点击的原始项目。

ThumbNail.jsx：

var ThumbNail = React.createClass({
    mixins: [ReactFireMixin],

    getTeamState() {
        return  TeamStore.getSelected() ;
    },

    getInitialState() {
        return {
            name: this.getTeamState(),
            articles: []
                };
    },

    getDefaultProps() {
        return {
            baseUrl: "https://shining-inferno-1085.firebaseio.com/"
        }
    },


    _updateArticle() {
        //console.log(this.state.name);
        var teamRef = new Firebase(this.props.baseUrl + this.state.name + "/results");

        this.bindAsArray(teamRef, 'articles');

    },

    componentDidMount() {

        TeamStore.addChangeListener(this._onChange);
        this._updateArticle();
    },

    componentWillUnmount() {
        TeamStore.removeChangeListener(this._onChange);
        this.unbind("articles");
    },

    render() {

        return (

            <ul className="tiles">
                <BasicInfo article={this.state.articles} />
            </ul>
            )   
    },

    _onChange() {
        var team = this.getTeamState();
        this.setState({name: team});
        //console.log(this.props.baseUrl + this.state.name + "/results");
        this.unbind("articles");
        this._updateArticle();
    }


});


module.exports = ThumbNail;

P.S 我有一个标题组件，它听同一家商店并且工作正常。如果您需要，请告诉我。

编辑：愿意解释反对意见吗？

Answer 1

此问题可能类似于 this。

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。