React访问/getPost路由时GetPost组件重复调用后端接口问题

这不是预期内的正常行为，属于React函数组件副作用放置位置错误导致的无限重渲染问题。

React函数组件在每次状态更新、props变化触发重渲染时，都会从头执行一遍函数体内的所有顶层代码，你的代码刚好触发了死循环：

• 你把axios.get请求直接写在了组件函数的顶层位置，组件每次渲染都会发起一次接口请求
• 请求返回后调用setPerson更新组件状态，状态变更会直接触发组件重渲染
• 重渲染又会再次执行顶层的axios请求，拿到结果又更新状态触发重渲染，最终形成无限循环调用接口的现象

所有数据请求、DOM操作这类副作用逻辑，都要放到useEffect钩子中执行，如果需要请求只在组件首次挂载时触发，给useEffect传入空依赖数组即可。
另外你App.js里/edit路由的属性存在笔误，写成了aelement，正确属性名是element，不修正的话这个路由页面无法正常渲染。

修复后的GetPost组件代码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
const GetPost = () => {
    const [person, setPerson] = useState([]);

    // 把请求放到useEffect中，空依赖表示仅组件挂载时执行一次
    useEffect(() => {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                console.log(res.data);
                setPerson(res.data);
            })
    }, [])

    return (
        person.map(p =>
            <div key={p.id}>
                {p.id}
            </div>
        )
    )
}
export default GetPost;

小提示：渲染列表的时候记得给最外层元素加上唯一的key属性（上面代码里已经补充了key={p.id}），不然React会抛出渲染警告，也会影响列表渲染的性能和状态正确性。

内容的提问来源于stack exchange，提问作者gauravKumar