Javascript 为什么我在React中的函数被调用了两次，但没有被同等地执行？

这是我在my home.js React应用程序中的函数，包含所有需要的日志：

function pin(){
  console.log('function pin()');
  var result = []
  var url = "http://warm-hamlet-63390.herokuapp.com/pin/list"
  axios.get(url)
  .then((res)=>{
    console.log('after .then');
    if(res.data){
      console.log('inside pin() if');
      for(var i in res.data.data)
      {
          result.push([i, res.data.data[i]])
      }
    }
    console.log('after pin() if');
  })
  console.log('end of pin()');
  return result;
}

函数之后，我立即导出了呈现页面的函数：

export default function App(){
  const{isLoaded, loadError} = useLoadScript({
    googleMapsApiKey: "my_api_key",
    libraries,
  })

  const [markers, setMarkers] = React.useState([]);
  if(loadError) return "Erro a carregar o mapa"
  if(!isLoaded) return "Carregando"

  return <div>
    {pin()}
    <GoogleMap 
    mapContainerStyle={mapContainerStyle} 
    zoom={11} 
    center={center}
    >
    <Marker
      position={
        {
           lat: 2, 
           lng:2
        }
      }
      icon={nivelpin.verde}
    >
    </Marker>

    </GoogleMap>
    
  </div>
}

导出默认函数App（）{
常量{isLoaded，loadError}=useLoadScript({
谷歌地图：“我的api密钥”，
图书馆，
})
常量[markers，setMarkers]=React.useState（[]）；
如果（加载错误）返回“Erro a carregar o mapa”
如果（！isLoaded）返回“Carregando”
返回
{pin（）}
}

URL设置为的JSON文件中有7条记录，但正如您在图像中看到的，它被执行了两次

函数仅在

内执行两次。然后（（res）=>{

为什么？这和axios有关吗

图片：

编辑：添加日志和显示日志的函数App（）+图像：

---

您正在调用返回的模板中的函数。这意味着该函数将在每次渲染时被调用

您必须将结果存储到在组件中呈现的变量中。如下所示：

class App extends Component {
  constructor() {
    super();
    this.state = { data: [] };
  }

  componentDidMount() {
    fetch(`https://api.coinmarketcap.com/v1/ticker/?limit=10`)
      .then(res => res.json())
      .then(json => this.setState({ data: json }));
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.data.map(el => (
            <li>
              {el.name}: {el.price_usd}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={data:[]}；
}
componentDidMount（）{
取回(`https://api.coinmarketcap.com/v1/ticker/?limit=10`)
.then（res=>res.json（））
.then（json=>this.setState（{data:json}））；
}
render（）{
返回(

{this.state.data.map（el=>(

{el.name}:{el.price_usd}

))}

);
}
}

（）

或者，如果您想坚持使用功能组件：

function App() {
  const [data, setData] = useState({ hits: [] });
 
  useEffect(async () => {
    const result = await axios(
      'https://hn.algolia.com/api/v1/search?query=redux',
    );
 
    setData(result.data);
  });
 
  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}
 
export default App;

函数应用程序（）{
const[data，setData]=useState（{hits:[]}）；
useffect（异步（）=>{
常量结果=等待axios(
'https://hn.algolia.com/api/v1/search?query=redux',
);
setData（result.data）；
});
返回(

{data.hits.map（项=>(


))}

);
}
导出默认应用程序；

---

（）

你能展示整个代码吗？它不确定你是如何执行的。这可能与呈现React组件有关，而不是与Axios有关。你可以通过在函数中添加更多日志语句来轻松测试这一点。但所展示的代码根本没有演示函数是如何执行的，更不用说tw了你们都是对的，我忘了问题的一个关键部分x）它被编辑了now@Enguias：您如何确认它只执行了两次

.then（）

回调，而没有执行两次

pin（）

回调？这与React有什么关系？我使用了console.log（）然后（（res）=>{@enguias请在您有能力时将此答案标记为正确，以便它可以帮助其他人解决类似问题。