دالة setTimeout لا تعمل في مكون React؟

هماك خطأ بسيط في الكود وهو المجال ل this في ال setTimeout حيث سوف تعود ال this للكائن window وليس ال component ولذلك يمكننا حل هذه المشكلة عن طريق 

• عمل binding عن طريق توليد دالة جديدة بمجال scope محدد 

  setTimeout(function(){this.setState({count: 1})}.bind(this), 3000);

   

• أو يمكنك استخدام ال arrow function كالتالي

  setTimeout(()=>this.setState({count: 1}), 3000);

   

ال setTimeout عبارة عن امر نمرر اليه امر اخر فعندما تقوم بتمرير this.setState فان this. سوف تشير الى النافذة لان الامر  تابع للنافذه و this سوف تشير الى الجزء او الobject  الذي ينتمي اليه الامر لذلك يمكنك ببساطة خلق متغير اخر يحمل المؤشر الي ال component  المراد العمل عليه و من ثم استخدامه مره اخرى ادخل ال setTimeout كالتالي 

Class Counter extends React.Component({
    getInitialState() {
        return {count: 0};    
    }

    componentDidMount() {
		var that = this;           # نضيف هنا مؤشر الcomponent  المراد اضافة الامر عليه 
        setTimeout(that.setState({count: 1}), 3000);
    }

    render() {
         return (
            <div className="count-wrapper">
                {this.state.count}
            </div>
         ); 
    }
});

ReactDOM.render(<Counter />, document.getElementById('app'));