שאלה בהעברת נתונים בprops -ריאקט

[זה השם שלי...]

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

<Link
      to={{
        pathname: `/manage`,
        ID: item.id,
      }}
    >
      {item.id}
    </Link>

const Search = ({ ID }) => {


return (
<div data-testid="CaseSearch">
  <Emp ID={ID} />
</div>
); };

 

[java]

זה בreact-router-dom?
אם כן - אני חושבת שיש לך שגיאה בצורה שבה את שולחת את הid
תסתכלי בתיעוד:

React Router: Declarative Routing for React

Learn once, Route Anywhere

reactrouter.com

אחרי שאת מעבירה את זה כמו שכתוב בתיעוד, אני מציעה לך לקבל את כל הprops ולבדוק אם יש שם את הערך,
כי יכול להיות שהוא יעבור תחת אוביקט אב נוסף.

 

[זה השם שלי...]

זה בreact-router-dom?

כן,

אחרי שאת מעבירה את זה כמו שכתוב בתיעוד

איזה מהם?
ניסיתי כמה דרכים ולא הסתדר לי

 

[java]

איזה מהם?
ניסיתי כמה דרכים ולא הסתדר לי

לא יוצא לי לעבוד עם לינק בד״כ כי אני בונה את זה בצורה של router,
אבל הייתי מנסה את הstate או אפילו את הsearch:

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    state: { fromDashboard: true }
  }}
/>

 

[זה השם שלי...]

העניין הוא שאני לא רוצה שיראו בURL למעלה את הID...
אלא להעביר את מה שהמשתמש בחר בפרופס לקומפ ההיא..

 

[s976]

לא מכיר את הנושא, אבל מתוך התיעוד - זה לא תקין לרשום ID כ-key של to
זה כל מה שאפשר לרשום שם

לעצם שאלתך. קצת קשה לענות אליה בלי לדעת מה מבנה הקישור שאמור להתקבל.

 

[זה השם שלי...]

איך אני משתמשת ב:
state: { fromDashboard: true }
מה הפרמטרים שאני שמה ואיך אני מקבלת את זה בקומפ' השניה?
פשוט לא ממש הבנתי...
תודה!!!

 

[זה השם שלי...]

לעצם שאלתך. קצת קשה לענות אליה בלי לדעת מה מבנה הקישור שאמור להתקבל.

אני רוצה לעבור לקומפ' אחרת-
כשאני לוחצת על הקישור- אני רוצה להעביר לקומפ' את הערך...

לא מכיר את הנושא, אבל מתוך התיעוד - זה לא תקין לרשום ID כ-key של to

לא כ"כ הבנתי מה זה משה מה אני מעבירה בתוך הפרופס...

 

[java]

איך אני משתמשת ב:
state: { fromDashboard: true }
מה הפרמטרים שאני שמה ואיך אני מקבלת את זה בקומפ' השניה?
פשוט לא ממש הבנתי...
תודה!!!

שולחת כ:
state: { DI: 11111 }
מקבלת:
כאמור לא התעסקתי עם זה אבל תדפיסי את props כולו ותראי.
יכול להיות שזה ישר תחת props ויכול להיות שתחת props.navigation.state.id
או במבנה דומה אחר.

 

[java]

לא כ"כ הבנתי מה זה משה מה אני מעבירה בתוך הפרופס...

כי זה לא קומפוננטה רגילה שאת שולחת לה prop ושולפת אותם
הrouter-dom מנהל את זה.

 

[ctrl c]

השליפה בתוך הקומפוננטה אליה את עוברת היא בצורה הזו:

props.location.state.ID

 

[זה השם שלי...]

כלומר ככה:
כי אני גם רוצה לקבל את זה בקומפ' כפרופס
וגם להעביר הלאה לקומפ אחרת...

const Search = ({ ID }) => {


return (
<div data-testid="CaseSearch">
  <Emp ID={
props.location.state.ID
} />
</div>
); };

 

[java]

כלומר ככה:
כי אני גם רוצה לקבל את זה בקומפ' כפרופס
וגם להעביר הלאה לקומפ אחרת...

const Search = ({ ID }) => {


return (
<div data-testid="CaseSearch">
  <Emp ID={
props.location.state.ID
} />
</div>
); };

כמעט.
במקום

const Search = ({ ID }) => {

תשלפי את:

const Search = (props) => {

אפשר גם:

const Search = ({location:{state:{ ID }}}) => {

ואז

<Emp ID={ID}

אבל זה כבר הרבה פחות קריא.

עוד הערה קטנה.
ממליצה לך לשנות את הID לid (בכל המקומות כמובן.)
זה יותר מקובל.

 

[זה השם שלי...]

יותר טוב ככה?

<Link
  to={{
    pathname: "/courses",
    state: { ID id }
  }}
/>

ואז:

const Search = (props) => {

ןלאחר מכן:

const Search = (props) => {
<Emp ID={{location:{state:{ id }}}}

 

[java]

האמת שלא...
שימי לב שערבבת את 2 ההצעות.

 

[זה השם שלי...]

עשיתי ככה:

const CaseSearch = ({
  location: {
    state: { ID },
  },
}) => {
  return (
    <div data-testid="CaseSearch">
      <EmployeeCase ID={ID} />
    </div>
  );
};

וככה:

<Link
          to={{
            pathname: `/case manage`,
            state: { ID: item.m_ID },
          }}
        >

ואני מקבלת שגיאה:
שהוא לא יכול לקרא את הID כי הוא לא נמצא...
אשמח לעזרה...
דחוף...
תודה!!!

 

[java]

שהוא לא יכול לקרא את הID כי הוא לא נמצא...

כנראה לא כי הוא לא נמצא אלא כי אבא שלו לא נמצא.
נסי לקבל ב CaseSearch את (props) ולהדפיס את prop לפני הreturn.
מה יש בו?

 

[זה השם שלי...]

כנראה לא כי הוא לא נמצא אלא כי אבא שלו לא נמצא.
נסי לקבל ב CaseSearch את (props) ולהדפיס את prop לפני הreturn.
מה יש בו?

Failed to compile
src\Pages\CaseSearch\CaseSearchForm\CaseSearch.js
Line 14:15: 'prpos' is not defined no-undef

Search for the keywords to learn more about each error.

 

[SuperWoman]

אולי זה יעזור לך

Passing values through React-Router v4 <Link />

Question: How can I pass a prop or a single value, like an _id, through React-Router's Link component, and catch it at the endpoint? This is what I mean: Let's say we are on page /a. The Link will...

stackoverflow.com

 

[java]

Failed to compile
src\Pages\CaseSearch\CaseSearchForm\CaseSearch.js
Line 14:15: 'prpos' is not defined no-undef

Search for the keywords to learn more about each error.

תפסת אותו בפונצקיה?

const CaseSearch = (props) => {
    console.log("props", props)
  return (
    <div data-testid="CaseSearch"/>  );
};