Javascript 当map函数位于代码中时，它返回undefined，当console.log返回空对象和数据。我只想要数据 import React，{useState，useffect}来自“React”； 常量幻灯片=（）=>{ let[nasaDa，setData]=useState（{}）； 函数fetchData（）{//fetch函数从服务器获取数据 获取（“/done”） .then（response=>response.json（）） 。然后（数据=>{ setData（data）//打印getRequest中`response.json（）`的结果 }) .catch（error=>console.error（error））//console.log，如果获取数据时出错 } useffect（（）=>{ fetchData（）；//调用fetch函数 }, []) 返回( {nasaDa.map（（项，索引）=>{//映射应从nasaDa返回的数据 返回[ {item.name}， ，//从数组映射出数据

{item.des}

] })} ) 导出默认幻灯片； 返回时，它给出

{}[{data}]

我需要的只是

[{data}]

像这样试试：

import React, { useState, useEffect } from 'react';

const Slide = () => {

     let [nasaDa, setData] = useState({}); 

        function fetchData() { //fetch function to get the data from the server
            fetch('/done')
            .then(response => response.json())
            .then(data => {
                setData(data) // Prints result from `response.json()` in getRequest
            })
            .catch(error => console.error(error)) //console.log if there is an error with fetching data 
        }

     useEffect(() => {
         fetchData();   //calling the fetch function 
     }, [])

     return(
         <div className="slide" >
             {nasaDa.map((item, index) => { //mapping the data that should be returned from nasaDa
                 return [
                     <div key={index} className='mapDiv'>
                         <h>{item.name}</h>, 
                         <img src={item.img}/>, //mapping out the data from array 
                         <p>{item.des}</p>
                 ]
             })}
         </div>
     )
export default Slide;

let[nasaDa，setData]=useState（null）；
函数fetchData（）{//fetch函数从服务器获取数据
获取（“/done”）
.then（response=>response.json（））
。然后（数据=>{
setData（data）//打印getRequest中`response.json（）`的结果
})
.catch（error=>console.error（error））//console.log，如果获取数据时出错
}
useffect（（）=>{
fetchData（）；//调用fetch函数
}, [])
返回(
{nasaDa&&nasaDa.map（（项，索引）=>{//映射应从nasaDa返回的数据
返回
{item.name}，
，//从数组映射出数据
{item.des}

})}
)

获取数据是异步的，您需要一种机制来知道是否加载了数据。我将初始状态设置为null，并添加了映射前检查，这样您就不会得到任何渲染结果。您可以选择在该状态下渲染微调器或其他内容

---

希望这有帮助。

fetch（）

是异步的。添加if-else块。if（item.name）{return{…your-code}请更新答案以解释更改的内容和原因。是否有方法在回调函数中进行渲染？否。您设置了状态，触发器会响应调用更新HTML的rerender。当fetchData完成时（因为它是异步的）react已经完成了第一次渲染，所以setState是一种告诉react某些内容已更改的方法，它应该反映在HTMLglad中的这些更改，我可以提供帮助。不要忘记将答案标记为已接受，以帮助其他有相同问题的人。您不是在回调中设置状态，而不是使用计时器吗？

let [nasaDa, setData] = useState(null); 

    function fetchData() { //fetch function to get the data from the server
        fetch('/done')
        .then(response => response.json())
        .then(data => {
            setData(data) // Prints result from `response.json()` in getRequest
        })
        .catch(error => console.error(error)) //console.log if there is an error with fetching data 
    }

 useEffect(() => {
     fetchData();   //calling the fetch function 
 }, [])

 return(
     <div className="slide" >
         {nasaDa && nasaDa.map((item, index) => { //mapping the data that should be returned from nasaDa
             return <div key={index} className='mapDiv'>
                     <h>{item.name}</h>, 
                     <img src={item.img}/>, //mapping out the data from array 
                     <p>{item.des}</p>
            </div>
         })}
     </div>
 )