通过参数重载反应功能组件

Question

我有一个React功能组件Users，它接受一个参数，一个url，该参数由API调用接收。我想使用这个参数来获取一些数据，但是当在该页面上重新加载时，它什么都不显示，因为该参数是未定义的。它也给出了一个错误。然而，当我在页面之间切换时，它是有效的，因为这样就会加载url。

我的代码：

App.js

function App() {
const [structure, setStructure] = useState({});
useEffect(() => {
// API CALL
fetchStructure().then((result) => setStructure(result));
}, []); 
// removed some parts of the layout
return (
<div className="bodydiv">
<Switch>
<Route path="/users" ><Users url={structure.users} /></Route>
<Route path="/cars"><Cars url={structure.cars} /></Route>
<Route path="/offers" ><Offers url={structure.offers} /></Route>
</Switch>
</div>
);
}
export default App;

Users.js

import React, { useState, useEffect } from 'react';
import { Typography } from '@material-ui/core';
import {fetchUsers} from '../Api';

function Users(props) {
const [users, setUsers] = useState([]);

useEffect(() => {
//API CALL
fetchUsers(props.url).then((result) => setUsers(result));
}, []);

return (
<div>
{(users || []).map((user) => (
<Typography variant="h3" gutterBottom >{user.name}</Typography>                
))}
</div>
);
}
export default Users;

函数"；等待"；要加载props.url？

Answer 1

您需要像这个一样向useEffect添加依赖项

function Users(props) {
const [users, setUsers] = useState([]);

useEffect(() => {
//API CALL
fetchUsers(props.url).then((result) => setUsers(result));
}, [props.url]);
.....

因此，当props.url更改时，useEffect将被再次调用，在您的情况下，它只被调用一次。当你还没有链接的时候。你可以在这里阅读更多关于useEffect