使用参数重新加载反应功能组件答案

【问题标题】：React Functional component with parameter reload使用参数重新加载反应功能组件
【发布时间】：2021-06-16 07:58:22
【问题描述】：

我有一个 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？

【问题讨论】：

标签： javascript reactjs api fetch

【解决方案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的内容here

【讨论】：