在 div 中执行 API 调用的正确方法？

Question

所以我目前正在尝试在 table 中显示数据。此数据来自数据库中带有外键的 2 个单独的 table。我使用此调用获取列表：

 useEffect(()=>{
axios.get("http://localhost:3001/stores").then((response)=>{
    setlistofStores(response.data) //State which contains the response from the API request
});
  }, []);

所以我可以获得商店列表并可以在 table 中显示它们，使用此代码没有问题：

 <TableBody>
      {listofStores.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => (
        <TableRow key={row.tenantName}>
          <TableCell>
              <Grid container>
                  <Grid item lg={2}>
                      <Avatar alt={row.unit} src='.' className={classes.avatar}/>
                  </Grid>
                  <Grid item lg={10}>
                      <Typography className={classes.name}>{row.unit}</Typography>
                  </Grid>
              </Grid>
            </TableCell>
          <TableCell>{row.contactName}</TableCell>
          <TableCell>
              <Typography 
                className={classes.status}
                style={{
                    flex: 'center',
                    backgroundColor: 
                    ((row.industry === 'Apparel' && 'purple') ||
                    (row.industry === 'F&B' && 'grey') ||
                    (row.industry === 'Admin' && 'red') ||
                    (row.industry === 'Tech' && 'blue'))
                }}
              >{row.industry}</Typography>
            </TableCell>
          <TableCell>{row.primaryEmail}</TableCell>
            <TableCell>{row.primaryPhone}</TableCell>
            
            <TableCell className={classes.stores}>1</TableCell>
            <TableCell ><button className={classes.viewButton} onClick={()=>{navigate(`/store/${row.id}`)}}>View</button></TableCell>
        </TableRow>

现在我想运行每一行内的这个API使用租户来显示它的数据：

useEffect(() => {
 axios.get(`http://localhost:3001/store/byId/${id}`).then((response) => {
   setTenant(response.data);
 });
 }, []);

正确的做法是什么？

Answer 1

useEffect 和 空依赖项 是适合你的情况的。您可以为详细信息创建一个新组件，并通过单击将用户导航到该组件（页面）。在那里您可以致电 API 了解详情。（或者它可以是 pop-up。这真的取决于你的 UI 设计）

const TenantDetails = ({ tenantId, ...props }) => {
  const [tenantData, setTenantData] = useState(null);
  useEffect(() => {
    axios.get(`http://localhost:3001/store/byId/${tenantId}`).then((response) => {
      setTenantData(response.data);
    });
  }, []);

  return (
    // your UI implementation
    <>
      tenantData ? <div> ... </div> : <div>loading</div>
    </>
  )
}

在 div 中执行 API 调用的正确方法？

Proper way to perform an API call inside div?

javascript

reactjs

material-ui

axios