Javascript （React js）TypeError:无法读取属性'；地图'；未定义的

我正在下面的代码中使用嵌套映射函数。第一个映射函数用于显示状态中的牛的详细信息，第二个映射函数用于从图像名称状态获取图像名称设置状态正在从响应中成功获取数据。我在互联网上看到了一些解决方案，将初始值设置为状态，但仍然会出现错误

组件.jsx

const ShowCattle = () => {

    const { lstate } = useContext(LoginContext);
    const [state, setstate] = useState([]);
    const [ImagePath, setImagePath] = useState({});
    const [ImageName, setImageName] = useState([]);


    const ShowData = async () => {

        await fetch('/show-cattles', {
            method: 'POST',
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                lstate
            })
        }).then((res) => {
            console.log(res);
            res.json().then((data) => {
                console.log(data);
                setstate(data);
            }).catch((e) => {
                console.log(e);
            })
        }).catch((err) => {
            console.log(err);
        })
    }

    const ShowList = () => {

  
        const ImgArray = state.map((item) => {
            return item.image;
        })

        setImageName(ImgArray[0]);
        
        setImagePath('/upload/');

        return (
            state.map((cvalue, index) => {

                return (
                    <div key={index}>

                        {
                            ImageName.map((value, index) => {
                                return (
                                    <div key={index} >
                                        <img src={ImagePath + index} alt="img" />
                                        <h6>Cattle Image Name : {value}</h6>
                                    </div>
                                )
                            })

                        }

                        <h6>Cattle Name : {cvalue.cattle_name}</h6>
                        <h6>Cattle Type : {cvalue.cattle_type}</h6>
                        <h6>Cattle Age : {cvalue.cattle_age}</h6>
                        <h6>Cattle Description : {cvalue.cattle_des}</h6>
                        <h6>Cattle City : {cvalue.cattle_city}</h6>
                        <h6>Cattle Price : {cvalue.cattle_price}</h6>
                        <hr />
                    </div>

                )
            })
        )

    }

    useEffect(() => {
        ShowData();
    }, []);

    return (
        <>
            <Header />
            <Container fluid>
                <Row>
                    <Col className="my_body">
                        <h1>Show Cattle Page</h1>
                        <br />
                        <br />
                        <ShowList />
                    </Col>
                </Row>
            </Container>

        </>
    )
}   

const showbown=（）=>{
const{lstate}=useContext（LoginContext）；
const[state，setstate]=useState（[]）；
const[ImagePath，setImagePath]=useState（{}）；
const[ImageName，setImageName]=useState（[]）；
const ShowData=async（）=>{
等待取回（'/show cattles'{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify({
状态
})
})。然后（（res）=>{
控制台日志（res）；
res.json（）.then（（数据）=>{
控制台日志（数据）；
设置状态（数据）；
}).catch（（e）=>{
控制台日志（e）；
})
}).catch（（错误）=>{
控制台日志（err）；
})
}
常量ShowList=（）=>{
const ImgArray=state.map（（项目）=>{
返回item.image；
})
setImageName（ImgArray[0]）；
setImagePath（'/upload/'）；
返回(
state.map（（cvalue，index）=>{
返回(
{
ImageName.map（（值，索引）=>{
返回(
牛图像名称：{value}
)
})
}
牛名：{C值.牛名}
牛的类型：{C值.牛的类型}
牛龄：{C值.牛龄}
牛的描述：{cvalue.Bowns_des}
牛市：{C价值.牛市}
牛价：{C价.牛价}

)
})
)
}
useffect（（）=>{
ShowData（）；
}, []);
返回(
显示黄牛页面




)
}   

传递给

setstate

或

setImageName

的值之一必须未定义。如果不查看您将状态设置为什么，我们将无法帮助您。好的，我正在编辑代码。我添加了所有代码。请立即检查。错误是由

state.map

或

ImageName.map

引发的？您是对的。ImageName状态中的一个值未定义。现在代码运行得非常完美。谢谢你的帮助。