זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/react/lessons/useeffect
שלום @ynonp
אני מנסה לעבוד עם useEffect וuseState
ומשהו נתקע לי
זה הקוד:
const [checked, setChecked] = useState(null);
useEffect(() => {
if(null === checked){
let newChecked = [];
items?.forEach(item => {
newChecked.push(item.id);
if(item.childes?.length){
item.childes.forEach(i => newChecked.push(i.id));
}
});
setChecked(newChecked.length ? newChecked : null);
}
},[items])
וזה הרעיון:
הitems הוא props שמגיע מחוץ לקומפוננטה
ברגע שהוא אכן מלא אני מעוניין למלאות את הchecked בid’s של צאצאי וצאצאי צאצאי הitems
בפועל נראה בconsule שהכל תקין ואכן המערך newChecked מתמלא כיהיה, אבל בפועל הstate לא משתנה.
דוגמא: https://codesandbox.io/s/friendly-tdd-dtl9p?file=/src/test.js
תודה מראש
הסתדרתי
סתם עניין סינכרוני…
לייק 1
בקשר ל- title , למה לא לעשות כך:
import React from 'react';
import ReactDOM from 'react-dom';
import { useState, useEffect } from 'react';
function DocumentTitleChanger(props) {
const [title, setTitle] = useState(document.title);
document.title = title;
return (
<input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
);
}
const App = () => {
return (
<div>
<h1>Hello World</h1>
<DocumentTitleChanger />
</div>
)
};
// main.js
const root = document.querySelector('main');
ReactDOM.render(<App />, root);
אז באמת קצת קשה לראות את הבעיה כאן אבל אנסה להסביר במילים: הקוד שכתבת משנה את ה document.title כל פעם שריאקט מנסה לחשב מחדש את הקומפוננטה שלך (זה נקרא “בכל render”). הבעיה שריאקט מחשב מחדש קומפוננטות לא רק כששדה title משתנה אלא במצבים נוספים, למשל אולי property מסוים שעבר לקומפוננטה השתנה, או משתנה אחר ב state עודכן.
שימוש ב useEffect מאפשר להגדיר משהו שיקרה רק כאשר שדה ספציפי ישתנה, כלומר רק אם באמת שדה title ב state הוא זה שיתעדכן אז ריאקט באופן אוטומטי יעדכן את ה document.title.
אני רוצה רק לוודא שהבנתי, יכולנו לחסוך את השינוי בכל רנדר על ידי כך שהיינו מכניסים אותו לאותה הפונקציה שגורמת לשינוי בסטייט.
לדוגמא כך:
return (
<input type="text" value={title} onChange={(e) => {
setTitle(e.target.value) ,
document.title = e.target.value;
}}/>
);
ואם ה-useEffect קורה בעקבות שינוי בסטייט יכולנו תמיד ללכת לאותו מקום שמשנה את הסטייט ושם לכתוב את הפונקציה שהיתה אמורה להיכתב בתוך ה-useEffect.
רק שהבעיה היא שבפונקציה ההיא לא ניתן ללגשת למשתנה שהיא מעדכנת בסטייט מיד לאחר העדכון כי את העדכונים ריאקט שומר לסיום אותו הרנדר אז הגישה אליהם היא רק ברנדר הבא.
לייק 1
מדויק וגם useEffect נותן לנו מנגנון יותר גנרי - למשל אם היית רוצה לעדכן את ה document.title כל פעם שמשתנה property מבחוץ (ולא סטייט פנימי שלך). בגדול לא תמיד יש לנו שליטה על הפונקציה שגורמת לשינוי שבגללו אנחנו רוצים להפעיל את הקוד שלנו
לייק 1
למה בתוך הuseeffect אתה משנה ישירות את המשתנה ולא משתמש בפונקציית SET?
הי,
על איזה קטע קוד אתה שואל? יכול להדביק פה?