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

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() {
    
      //Mui fileds and paper style
      const paperStyle = { padding: '50px ', width: 550, margin: '50px auto' }
    
      //Fetch data from api
      const [userx, setUserx] = useState([{data:null,support:null}]);
      const url = 'https://reqres.in/api/users/2';
    
        useEffect(()=>{
    
          //debugger
    
          const fetchData = async () =>{
    
            await axios.get(`${url}`)
            .then((response) =>{
              setUserx(response.data)
    
            }).catch((error)=>{
                console.log(error)
            })
          }
    
          fetchData();
          }
    
        ,[]);
    
      return (
    
        <Grid container spacing={2} style={paperStyle}>
    
          <Grid align='center' >
            <Paper elevation={20} >
    
              <Grid align='center'>
    
                <h2 style={{padding:'10px' ,background: "#000080", color: 'white' }}> 
       <PersonOutlineIcon large style={{fontSize:'80%'}} />User Details</h2>
    
              </Grid>
              
              <form>
             
              <img style={{width:"20%"}} src={userx.data  ? userx.data.avatar : ''}/>
                <h1 style={{color:'#000080'}}>{userx.data  ? userx.data.first_name : ''} 
       {userx.data  ? userx.data.last_name : ''}</h1>
    
              <Grid container >
                <Grid item xs={6} >
                  <h2 style={{color:'white', background: "purple"}}>Contact Info</h2>
                  <TextField   value={userx.data  ? userx.data.id : ''}   variant="standard" 
         />
                  <TextField  value={userx.data  ? userx.data.email  : ''}   
       variant="standard" />
                </Grid>
    
                <Grid item align='left' xs={6} style={{marginBottom:'40px'}}>
                  <h2 style={{color:'white', background: "purple"}}>Social Link</h2>
                  <TextField  value={userx.support ? userx.support.url : ''}   
       variant="standard" />
                  <TextField  value={userx.support ? userx.support.text : ''}     
      variant="standard" />
                </Grid>
                
              </Grid>
              </form>
            </Paper>
          </Grid>
        </Grid>       
      )
    }enter code here
    
    export default FormApi

最佳答案

这是因为 React 在开发环境中渲染了 2 次组件。为避免这种情况，您可以注释掉 <React.StrictMode>。在 index.js 中标记文件。

渲染两次只会出现在开发环境，而StrictMode对开发有很多好处:

• 识别生命周期不安全的组件
• 有关遗留字符串引用 API 使用的警告
• 关于已弃用的 findDOMNode 用法的警告
• 检测意想不到的副作用
• 检测遗留上下文 API
• 确保可重用状态

所以最好保留<React.StrictMode>如果不影响您正常的开发工作，请标记。

另请参阅:React StrictMode

https://stackoverflow.com/questions/72406486/