React Fetch API在页面加载时被调用两次。

11 浏览
0 Comments

React Fetch API在页面加载时被调用两次。

React Fetch API 在页面加载时被调用了两次，我不知道在这段代码中缺少了什么或者我做错了什么。我从早上就面临这个问题，非常感谢您提供的任何帮助。

import React, { useState, useEffect } from 'react'
import axios from 'axios';
import { Grid, Paper, TextField } from '@mui/material'
import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
function FormApi() {
  const paperStyle = { padding: '50px ', width: 550, margin: '50px auto' }
  const [userx, setUserx] = useState([{data:null,support:null}]);
  const url = 'https://reqres.in/api/users/2';
  useEffect(()=>{
    const fetchData = async () =>{
      await axios.get(`${url}`)
      .then((response) =>{
        setUserx(response.data)
      }).catch((error)=>{
          console.log(error)
      })
    }
    fetchData();
  },[]);
  return (
    
      
        
          
            
 
              User Details
            

          
          

            
            
{userx.data  ? userx.data.first_name : ''} 
              {userx.data  ? userx.data.last_name : ''}
            

            
              
                
Contact Info

                
                
              
              
                
Social Link

                
                
              
            
          

        
      
           
  )
}
export default FormApi

0

3 答案

0 Comments

React Fetch API在页面加载时被调用两次的问题可能是由于开发模式下的一些原因导致的。解决这个问题的方法有两种：

第一种方法是使用useRef钩子来处理，代码如下：

const renderAfterCalled = useRef(false);
useEffect(() => {
  if (!renderAfterCalled.current) {
    // 进行API调用的函数
  }
  renderAfterCalled.current = true;
}, []);

第二种方法是移除``，但是建议不要移除它。``在开发过程中是一个有用的工具，它可以检查潜在的问题并警告不安全的做法。

总结起来，要解决React Fetch API在页面加载时被调用两次的问题，可以使用useRef钩子或者移除``。但是建议在开发过程中保留``以便发现潜在问题。

0
0 Comments

在React 18中，这是正常行为。它只会在开发环境下且严格模式被启用时才会发生，并且不会在生产构建中出现问题。

有点烦人，但实际上并没有什么需要担心的。有一个解决方法，你可以在这里详细了解:

React 18, useEffect is getting called two times on mount

问题的出现原因：在React 18中，当严格模式被启用时，使用React Fetch API会在页面加载时调用两次。

解决方法：在生产构建中，这不会成为问题，因此不需要特别的解决方法。如果在开发环境中遇到这个问题，可以通过在组件中添加条件判断来解决：

useEffect(() => {
  if (!process.env.NODE_ENV === 'production') {
    // 调用Fetch API的代码
  }
}, []);

0
0 Comments

问题：React在开发环境中会渲染组件两次，导致Fetch API被调用两次。

原因：React在开发环境中会渲染组件两次。这是因为在开发环境中，React会使用严格模式（StrictMode）来进行渲染，严格模式有很多开发相关的好处，例如检测不安全的生命周期、警告使用过时的字符串ref API、警告使用已弃用的findDOMNode等。

解决方法：如果不影响正常的开发工作，可以将<React.StrictMode>标签在index.js文件中注释掉，这样就可以避免Fetch API被调用两次。

在React的开发环境中，渲染组件两次是因为使用了严格模式，为了开发的安全性和可靠性，建议保留<React.StrictMode>标签。如果Fetch API被调用两次对正常开发工作有影响，可以注释掉该标签。更多关于严格模式的信息可以参考React官方文档的React StrictMode部分。

0