为什么我的react应用程序中的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}
/>
))
}
</>
)
};