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收听此商店，并在_updateArticle更改时触发this.state.name方法。但是，它不能正常工作。

物品悬停时，物品不会发生变化。
文章在悬停休假时变为悬停项目（他们不应该这样做）他们应该回到被点击的原始项目。

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我有一个标题组件，可以收听同一个商店并且工作正常。如果您需要，请告诉我。

编辑：关注解释downvote？

Answer 1

此问题可能类似于 this 。

setState（）不会立即改变this.state，但会创建挂起状态转换。在调用此方法后访问this.state可能会返回现有值。

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

1 个答案: