קורס React 2020 שיעור כתיבת פקד בתור מחלקה

דיונים מקורסים
#1
זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/react/lessons/90b020ad-75d2-4238-889f-6508a5beab49
#2

ניסיתי להעביר את הפקד של הcounter לצורה של מחלקה אבל נתקעתי כאן:
this.setState( {count:count+delta});
הוא כמובן לא מכיר לי את count כשאני רושמת אותו בתור ערך, השאלה איך אפשר לגשת לערך הנוכחי של count

#3

הי,

יכול להדביק את כל קוד המחלקה שניסית לכתוב?

#4

כן,תודה!

export default class Counter2 extends React.Component {   
    constructor(props) {
        super(props);
        this.state = { count:0 };
        this.inc = this.inc.bind(this);
      }
      inc() { 
        const { delta } = this.props;
        this.setState( {count:count+delta});
      }
   
    render() {
        const {count}=this.state;
      
      return (
        <div>
        <p>
          I was clicked {count} times
          <button onClick={this.inc}>Click Me</button>
        </p>
      </div>
      );
    }
  }
#5

הי,

הבעיה בפונקציה inc. הנה שתי דרכים (השניה יותר מומלצת) לגשת ל count מהסטייט הישן:

      inc() { 
        const { delta } = this.props;
        // 1. Works. Less recommended
        this.setState({
          count: this.state.count + delta
        });

        // 2. Works and recommended
        this.setState((oldState) => ({
          count: oldState.count + delta,
        }));
      }
#6

תודה רבה!!
הדרך השנייה עובדת מעולה, אבל הדרך הראשונה לא
this.count=undefind

#7

סליחה תיקנתי - צריך להיות this.state.count

#8

הי,
תודה! זה עובד מעולה!!

לייק 1
#9

היי אני גם המרתי את הפקד counter ל class ומשום מה זה לא רץ לי… מצו"ב הקוד תודה!

import React from "react";

export default class Counter extends React.Component{
  constructor(props){
    super(props);
    this.state={count:0}
    this.inc=this.inc.bind(this)
    // this.res=this.res.bind(this)
  }

   inc(){
    this.setState((x)=>({x:x+delta,}));
 }
 
    render(){
 const {delta}=this.props
 const {count}=this.state
    return(<div>    
    <p>
        {count}המספר שלי הוא 
        <button onClick={this.inc}>click me </button>
        {/* <button onClick={res}>resert</button> */}
    </p>
     </div>
    );
  }

}


   

  

    
   

}
#10

הי

הבעיה הכי גדולה בכתיב ה class-ים היא שהסטייט הוא אוביקט יחיד, ואז כל קריאה ל setState צריכה לעבוד עם כל האוביקט (ומזה יבואו בהמשך עוד אינסוף בעיות, ובגלל זה היום כולם עובדים בכתיב הפונקציות).

בכל מקרה כתבתי גירסה מתוקנת של מה שניסית לכתוב כאן:

אני ממליץ עדיין לשמור מרחק מכתיב הקלאסים כמה שאפשר

לייק 1