React Functional component with parameter reload

Question

I have a React functional component Users, which takes a parameter, a URL, which was received by an API call.I want to use this parameter to fetch some data, however when reloading on that page it renders nothing because the parameter is undefined. It also gives an error. It works however when I switch between pages, because then the URL is loaded.

My code:

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;

How can the function "wait" for the props.url to be loaded?

Evgeny Klimenchenko · Accepted Answer · 2021-03-18 21:17:58Z

1

You need to add dependecies to your useEffect like this

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

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

.....

So when props.url changes the useEffect will be called again, in your case it is called only once. And it is when you don't have a link yet. You can read about useEffect more here

answered Mar 18, 2021 at 21:17

Evgeny Klimenchenko

1,1941 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Functional component with parameter reload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related