React调用PokemonAPI发起Fetch时console.log结果打印两次是否存在问题？

• 这是React 18及以上版本*开发环境开启严格模式（Strict Mode）*的正常表现，不属于代码或接口异常
• 严格模式会在组件首次挂载阶段重复执行一次副作用相关逻辑，目的是提前暴露副作用泄漏、状态不一致等潜在问题，该逻辑仅在开发环境生效，生产环境不会触发
• 你当前将fetch请求直接写在组件顶层，组件每渲染一次就会执行一次请求，严格模式下两次渲染自然就会触发两次打印

不要将请求逻辑直接放在组件顶层执行，应该用useEffect钩子管理请求的触发时机：

import { useEffect } from 'react'

const MyComponent = () => {
  const fetchPokemon = async () => {
    try {
        const res = await fetch('https://pokeapi.co/api/v2/pokemon/1')
        const pokemon = await res.json()
        console.log(pokemon)
    } catch (err) {
        console.log(err)
    }
  }

  useEffect(() => {
    fetchPokemon()
  }, []) // 空依赖数组代表仅在组件首次挂载完成后触发
  // 其他组件逻辑
  return <div></div>
}

注意：即使调整为上述写法，开发环境严格模式下还是会出现两次打印，这是React的预期设计，不需要额外做防抖、加执行状态锁等处理，项目打包上线后会自动恢复为单次执行。

如果你确实不需要严格模式的检查能力，也可以移除根组件外层的<React.StrictMode>包裹，开发环境就不会出现重复执行的情况，但不推荐这么做，严格模式可以帮你规避很多常见的React开发问题。

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