首页  >  问答  >  正文

解决React路由属性中获取undefined的问题

<p>我想把一些属性(<code>loading</code>和<code>getContacts</code>)发送给ReactJS中的一个组件。我使用路由来获取每个路径,但是目标组件中的结果是undefined。这是怎么回事?</p> <pre class="brush:php;toolbar:false;">const App = () => { const [getContacts , setContacts] = useState([]); const [loading , setLoading] = useState(false); return( <div className='App'> <Navbar/> <Routes> <Route path='/' element = {<Navigate to ="/contacts"/>}/> <Route path='/contacts' loading= {loading} contacts= {getContacts} element= {<Contacts/>} /> <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'> Not Found! </div>} /> </Routes> </div> ); export default App;</pre> <p>在Contact.jsx中,我有:</p> <pre class="brush:php;toolbar:false;">const Contacts = ({ contacts, loading }) => { return ( <> <div>{contacts}</div> <div>{loading}</div> </> ); }; export default Contacts;</pre> <p>但是它们都是undefined。</p>
P粉696891871P粉696891871455 天前549

全部回复(2)我来回复

  • 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} />}
    />

    回复
    0
  • P粉852578075

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

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

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

    回复
    0
  • 取消回复