解决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>
2
989
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
你正在将props传递给你的
<Route/>组件。<Route path="/contacts" loading={loading} contacts={getContacts} element={<Contacts />} />但是你应该将它们传递给你的实际
<Contacts/>组件<Route path="/contacts" element={<Contacts loading={loading} contacts={getContacts} />} />尝试将状态变量直接放入子元素中：
<Route path='/contacts' element={<Contacts loading={loading} contacts={getContacts}/>} />