React组件渲染多次，重新加载页面时失败

Question

我有一个 rails (7.0.2) 应用程序并且刚刚安装了 React。我对反应还很陌生，似乎无法理解为什么我的组件看起来加载了多次，第一次是 props 的空值，第二次是 [=13 的正确值=].

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;

和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;

当我删除这部分代码并重新加载页面时，我的 props 在控制台中查看时正确显示。然后，当我放回代码并保存（无需重新加载）时，它会正确显示。

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

然而，当我再次重新加载时，我得到了同样的以下错误： Uncaught TypeError: Cannot read properties of undefined (reading 'map')

好像第一次渲染的时候，道具是空的。然后第二次，它充满了数据。我检查了我的 rails 应用程序，它只点击了 API 一次。我做错了什么？

更多日志输出：

Answer 1

多次渲染React组件？

在使用 Effect 中完成请求之前，React 将快速渲染

所以在第一次渲染客户数组时将为空

当请求完成时，你正在改变状态，所以反应将 re-render 组件

只有使用状态的组件会在状态更改时重新加载，否则 UI 不会更新

重新加载页面时失败？ |初始加载失败

因为在初始渲染中客户将没有数据customers.data 将是未定义的所以它不会有地图

要绕过此错误，请使用 props.customers?.data && props.customers.data?.map() 添加问号意味着表达式将在未定义的情况下进行计算

来源 - Optional_chaining

React组件渲染多次，重新加载页面时失败

React component rendering multiple times, failing when reloading the page

javascript

ruby-on-rails

reactjs