Heim  >  Fragen und Antworten  >  Hauptteil

Lösen Sie das Problem, dass die React-Routing-Attribute undefiniert werden

<p>Ich möchte einige Eigenschaften (<code>loading</code> und <code>getContacts</code>) an eine Komponente in ReactJS senden. Ich verwende Routing, um jeden Pfad abzurufen, aber das Ergebnis ist in der Zielkomponente undefiniert. Wie läuft das? </p> <pre class="brush:php;toolbar:false;">const App = () => const [getContacts, setContacts] = useState([]); const [loading, setLoading] = useState(false); zurückkehren( <div className='App'> <Navbar/> <Routen> <Route path='/' element = {<Navigieren zu ="/contacts"/>}/> <Route path='/contacts' Laden= {Laden} Kontakte= {getContacts} Element= {<Kontakte/>} /> <Route path="/contacts/add" element = {<AddContact/>}/> <Route path = "/contacts/:contactId" element = {<ViewContact/>}/> <Route path = "/contacts/edit/:contactId" element = {<EditContact/>}/> <Route path="*" element={ <div className='text-light py-5'> Nicht gefunden! </div>} /> </Routen> </div> ); Standard-App exportieren;</pre> <p>In Contact.jsx habe ich: </p> <pre class="brush:php;toolbar:false;">const Contacts = ({ Kontakte, Laden }) => zurückkehren ( <> <div>{Kontakte}</div> <div>{loading}</div> </> ); }; Standardkontakte exportieren;</pre> <p>Aber sie sind alle undefiniert. </p>
P粉696891871P粉696891871455 Tage vor546

Antworte allen(2)Ich werde antworten

  • P粉806834059

    P粉8068340592023-08-15 10:22:12

    你正在将props传递给你的<Route/>组件。

    <Route
      path="/contacts"
      loading={loading}
      contacts={getContacts}
      element={<Contacts />}
    />

    但是你应该将它们传递给你的实际<Contacts/>组件

    <Route
      path="/contacts"
      element={<Contacts loading={loading} contacts={getContacts} />}
    />

    Antwort
    0
  • P粉852578075

    P粉8525780752023-08-15 09:54:15

    尝试将状态变量直接放入子元素中:

    <Route path='/contacts' element={<Contacts loading={loading} contacts={getContacts}/>} />

    Antwort
    0
  • StornierenAntwort