خطأ this.state is undefined في React؟

Adam Ebrahim · 17 مارس 2021

أحاول تحويل مشروع React إلى ES6، ولدي مكونان: مكون أب ومكون ابن، لكن يظهر لي الخطأ التالي عند إستخدام this.state في الكود:

Uncaught TypeError: Cannot read property 'state or props' of undefined

هنا المكون الأب Parent component:

export default class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {code: ''};
    }

    setCodeChange(code) {
        this.setState({code: code});
    }


    login() {
      // هنا تحدث المشكلة نتيجة لخطأ this.state is undefined
        if (this.state.code == "") {}
    }

    render() {
        return (
            <div>
                <Child onCodeChange={this.setCodeChange} onLogin={this.login} />
            </div>
        );
    }
}

المكون الابن child component:

export default class Child extends Component {
    constructor(props) {
        super(props);
    }

    handleCodeChange(e) {
        this.props.onCodeChange(e.target.value);
    }

    login() {
        this.props.onLogin();
    }

    render() {
        return (
          <>
            <input name="code" onChange={this.handleCodeChange.bind(this)}/>
            <button id="login" onClick={this.login.bind(this)}>
          </>
        );
    }
}

Child.propTypes = {
    onCodeChange: React.PropTypes.func,
    onLogin: React.PropTypes.func
};

المشكلة تحدث عند الضغط على الزر #login

إسلام عبدالعزيز · 17 مارس 2021

في لغة الجافاسكريبت، كل دالة لها context او سياق لتعمل فيه. لو قمنا بكتابة دالة عادية خارج React، وقمنا بعمل log للـ this، ستجد انها تشير الى النطاق/السياق العام (Window for Browsers & Global for Node). عندما نكتب مكون في React، نريد دائماً ان نشير للاحداث ان تعمل على المكون نفسه، وليس السياق العام. ولكن ما يحدث هو ما شرحته من قبل، حيث ان الـ methods بداخل المكون لا تأخذ سياقه.

لهذا السبب، تقدم جافاسكريبت bind وهي دالة تستخدم لتغيير السياق العام لدالة معينة. انظر للمثال التالي:

// السياق هنا هو window
function logThis() {
	console.log(this);
}

logThis(); // => Window {}

const car = {
	color: 'red',
	speed: 260
};

// الآن سنحول السياق الى كائن السيارة ونضعه في دالة جديدة
const logThisCar = logThis.bind(car);

logThisCar(); // => {color: "red", speed: 260}

لذا، لربط اي دالة بمكون الـ React قم باستخدام bind بداخل الـ constructor هكذا:

constructor(props) {
	super(props);
	this.state = {code: ''};

	// هنا
	this.login = this.login.bind(this);
}

Mohammed Saber6 · 17 مارس 2021

مرحباً بك:
المشكلة هي أن ال this keyword في المكون الأب لا تشير للكلاس ولكن تشير إلي ال window ولذبك يجب أن تعمل bind لل this في ال constructor قبل تمريرها هكذا

constructor() {
  super(props);

  this.setCodeChange = this.setCodeChange.bind(this);
  this.login = this.login.bind(this);
}

خطأ this.state is undefined في React؟

السؤال

Adam Ebrahim

2 أجوبة على هذا السؤال

Recommended Posts

إسلام عبدالعزيز

Mohammed Saber6

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية