React.js狀態變量不會在懸停時更新

Question

我正在使用狀態變量來跟蹤圖標是否已懸停。 變量未更新。 狀態變量的Console.log也不起作用（控制台中未顯示）

Icons = React.createClass({

    getInitialState: function() {
        return { icon_id: 0};
        console.log(icon_id);
    },

    onHover: function(event) {
        this.setState({ icon_id: event.currentTarget.dataset.id });
        console.log(icon_id);
    },

    render: function() {

        return (

        <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionLeave={true} transitionEnterTimeout={600} transitionAppearTimeout={600} transitionLeaveTimeout={300}>


                    <ul className="someclass">{ iconslist.map(function(i){
                            return <li key={i.id}><a href={i.url} target="_blank"><span className={i.class} id={i.id} data-id={i.data} onMouseOver={this.onHover}></span></a></li>

                        }) }

                    </ul>
                    <p className="icon-text">{iconslist[this.state.icon_id].name}</p>


        </ReactCSSTransitionGroup>

        );

    }

});

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var iconslist = [

    { data: '0', url: 'mailto:******', id: 'lightbulb', class: 'fa fa-lightbulb-o fa-5x', name: 'Thoughts'},
    { data: '1', url: 'mailto:******', id: 'gears', class: 'fa fa-gears fa-5x', name: 'ML'},
];

Answer 1

您應該按以下方式訪問任何狀態變量：

var iconid = this.state.icon_id;
console.log(iconid);

Answer 2

setState方法不會立即更新類的狀態。 所以setState方法還接受了一個回調，該回調在react更新狀態后被調用- 官方文檔

因此，在您的代碼中，您必須執行以下操作：

onHover: function(event) {
    this.setState({ 
      icon_id: event.currentTarget.dataset.id 
    }, () => console.log(icon_id));
},

Answer 3

您需要稍微更改代碼。 您必須綁定此方法，因為它不知道該方法。 看看我改變了什么。

      getInitialState: function() {
        return { icon_id: 0};
        console.log(icon_id);
    },

    onHover = (event) => {
        this.setState({ icon_id: event.currentTarget.dataset.id });
        console.log(icon_id);
    },

    render: function() {

        return (

        <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionLeave={true} transitionEnterTimeout={600} transitionAppearTimeout={600} transitionLeaveTimeout={300}>


                    <ul className="someclass">{ iconslist.map(function(i){
                            return <li key={i.id}><a href={i.url} target="_blank"><span className={i.class} id={i.id} data-id={i.data} onMouseOver={() => this.onHover()}></span></a></li>

                        }) }

                    </ul>
                    <p className="icon-text">{iconslist[this.state.icon_id].name}</p>


        </ReactCSSTransitionGroup>

        );

如果使用箭頭功能，則不需要綁定功能。

Answer 4

這些答案均不正確。 我想到了。

我不得不在渲染函數中使用“函數”一詞，而不必使用：

<ul className="icons">{ iconslist.map((i) => {
                            return (
                            <li key={i.id}>
                                <span className={i.class} 
                                    id={i.id} 
                                    data-id={i.data} 
                                    onMouseOver={this.onHover}>
                                </span>
                            </li>
                            )
                        }) }

                    </ul>

在map函數中使用（i）=>是什么。

此線程中沒有其他人可以喝的湯。