为什么我的反应应用程序中的 fetch 语句会导致两次调用？

Question

谁能向我解释为什么 fetch 语句会导致 2 个 API 调用？ chrome 控制台和开发工具 > 网络选项卡都显示了两个版本。以下是我正在使用的代码。

import React, { useState } from 'react';
import './contact.css';

const App = () => {

  const [contacts, setContacts] = useState([]);

  fetch("https://randomuser.me/api/?results=3")
  .then(response => response.json())
  .then(data => console.log(data));

  return (

    <>
      {
        contacts.map(contact => (
          <ContactCard
            avatar="https://via.placeholder.com/150"
            name={contact.name}
            email={contact.email}
            age={contact.age}
          />
        ))
      }
    </>
  )
};


const ContactCard = props => {

  const [showAge, setShowAge] = useState(false);

  return (
    <div className="contact-card">
      <img src="https://via.placeholder.com/150" alt="profile" />
      <div className="user-details">
        <p>Name: {props.name}</p>
        <p>Email: {props.email}</p>

        <button onClick={() => setShowAge(!showAge)}>{!showAge ? 'Show' : 'Hide'} Age</button>

        {
          showAge && <p>Age: {props.age}</p>
        }

      </div>
    </div>
  );
};

export default App;

Answer 1

const App = () => {

  const [contacts, setContacts] = useState([]);
  // the issue is here, each time the component renders this statement will be exectuted
  fetch("https://randomuser.me/api/?results=3")
  .then(response => response.json())
  .then(data => console.log(data));

  // if you want to execute code after component is mounted into dom, use useEffect
  // like this

   useEffect(() => {
        fetch("https://randomuser.me/api/?results=3")
        .then(response => response.json())
        .then(data => console.log(data));
   }, []) // the second param for useEffect is dependencies array, pass an empty array if you want your effect to run only once (which is equivalent to componentDidMount in react class based components)
  return (

    <>
      {
        contacts.map(contact => (
          <ContactCard
            avatar="https://via.placeholder.com/150"
            name={contact.name}
            email={contact.email}
            age={contact.age}
          />
        ))
      }
    </>
  )
};