javascript - Showing map is not function in react page after refreshing the page

Question

I built a simple react app that fetch the users from database like mysql After fetching data I want to pass data to child component and it works sometimes but when refresh page it throw error like data.map is not function here error message image my code of parent component

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 }

child component

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>
        
            )
          
        })
        
    )
}

how to resolve this 1:

标签： javascriptreactjsreact-redux

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} />