刷新页面后，在function页面中显示地图无效

Question

我构建了一个简单的react应用程序，它在获取数据后从数据库(如mysql )获取用户，我想将数据传递给子组件，它有时会工作，但是当刷新页面时，抛出的错误(如data.map不是函数这里错误信息图像 )、父组件的代码

import React,{useEffect, useState ,Context, createContext} from 'react'
import Sidenav from '../components/Sidenav'
import {makeStyles} from '@material-ui/core/styles';
import Content from '../components/ContentParent'
import RightSideNav from '../components/RightSideNav'
import Backdrop from '@material-ui/core/Backdrop';
import Async from 'react-async';
import CircularProgress from '@material-ui/core/CircularProgress';
import { get } from 'js-cookie';
const bodyData = createContext()
const useStyles = makeStyles((theme) => ({
    HomeDataContainer_parent:{
        backgroundColor:'#F2F2F2',
        display:'flex',
    },
    backdrop: {
        zIndex: theme.zIndex.drawer + 1,
        color: '#fff',
      },
}))
 function HomeDataContainer() {
    const [data,setData] = useState('')
    const [isload,setload] = useState(true)   
    useEffect(() =>{
       async function get(){
            fetch('/postsDrawer').then(async data => await data.json()).then(result =>{ setData(result)
             setload(false)
             
            })
        }
       get()
    },[data])
    const classes = useStyles()
    return (
            
        <div className = {classes.HomeDataContainer_parent}>
        <Backdrop className={classes.backdrop} open={isload} >
        <CircularProgress color="inherit" />
      </Backdrop>
            {/* sidenav */}
            <Sidenav/>
            {/* content */}
           
            if(data){
                <Content value = {data} />
            }
         
            {/* Right side updates */}
            <RightSideNav />
        </div>
    )
}
export default HomeDataContainer
export { bodyData }

子组件

import React from 'react'
import {makeStyles} from '@material-ui/core/styles'
import Avatar from '@material-ui/core/Avatar';
import ArrowDropDownTwoToneIcon from '@material-ui/icons/ArrowDropDownTwoTone';
import ArrowDropUpTwoToneIcon from '@material-ui/icons/ArrowDropUpTwoTone';
import LocalOfferTwoToneIcon from '@material-ui/icons/LocalOfferTwoTone';
import Chip from '@material-ui/core/Chip';
import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
import VisibilityIcon from '@material-ui/icons/Visibility';
import Logo from '../images/action.png'
import { BodyData }  from '../components/HomeDataContainer'

export default function HomeRecentQuestion(props) {
    const classes = useStyles()
    const data = props.value
     let count = 0
    return (
        
        data.map(content => {
            let count = content.tags.split(',')
            return (
                <h1>{content.id}</h1>
        
            )
          
        })
        
    )
}

如何解决这个 1

Answer 1

将数据状态更改为：

const [data,setData] = useState([])

将useEffect更改为：

useEffect(() =>{
   if(!data.length)
     fetch('/postsDrawer').then(res=> res.json())
        .then(result => { 
            setData(result)
            setload(false)
         })
},[data])

将组件更改为：

<HomeRecentQuestion value={data} />

Answer 2

您可以尝试在子组件上使用下面的内容。

data && data.map(content => {
            let count = content.tags.split(',')
            return (
                <h1>{content.id}</h1>
        
            )
          
        })

Answer 3

当您创建这样的数据时，您将更改它的类型状态: const，setData = useState([])；只是您可以这样做，而不是问题会关闭它。