React component rendering multiple times, failing when reloading the page-CodePudding

I have a rails (7.0.2) application and just installed React. I'm very new to react and can't seem to understand why it looks like my component is loading multiple times, the first time with an empty value for props and the second time with the correct values for props.

App.js:

import "./App.css";
import axios from "axios";
import Customers from "./components/customers";
import { useEffect, useState } from "react";

const API_URL = "http://localhost:3000/internal_api/v1/customers";

function getAPIData() {
  return axios.get(API_URL).then((response) => response.data);
}

function App() {
  const [customers, setCustomers] = useState([]);

  useEffect(() => {
    let mounted = true;
    getAPIData().then((items) => {
      if (mounted) {
        setCustomers(items);
      }
    });
    return () => (mounted = false);
  }, []);

  console.log('LOADED App.js');
  return (
    <div className="App">
      <h1>Hello</h1>
      <Customers customers={customers} />
    </div>
  );
}

export default App;

and customers.js:

import React from "react";

function Customers(props) {
  console.log('LOADED customers.js');
  return (
    <div>
      <h1>These customers are from the API</h1>
      {props.customers.data.map((customer) => {
        return (
          <div key={customer.id}>
            <h2>{customer.id}</h2>
          </div>
        );
      })}
    </div>
  );
}

export default Customers;

When I remove this part of the code and reload the page, my props come through correctly when looking in console. Then, when I put the code back and save (without reloading), it displays correctly.

      {props.customers.data.map((customer) => {
        return (
          <div key={customer.id}>
            <h2>{customer.id}</h2>
          </div>
        );

However, as soon as I reload again, I get the same following error: Uncaught TypeError: Cannot read properties of undefined (reading 'map')

It seems as though the first time everything renders, props is empty. Then the second time, it is full with the data. I checked my rails app and it only hits the API once. What am I doing wrong?

More log outputs:

CodePudding user response：

React component rendering multiple times?

React will render fast before completing the request in use Effect

so in first render customers array will be empty

when request is fulfilled, you are changing state, So react will re-render the component

Only component that uses state reloads when the state is changed this is required else UI will not update

failing when reloading the page? | Failed on Initial Load

Since in Initial render customers will have no data customers.data will be undefined so it will not have map

to bypass this error use props.customers?.data && props.customers.data?.map() addding question mark means expression will be evaluated if not undefined

Source - Optional_chaining