我可以查看数组数据，但获取后无法访问它

如何解决我可以查看数组数据，但获取后无法访问它

我有一个函数，可以根据数组中项目（目标）的数量创建组件。我不断收到错误消息，该函数无法映射未定义的“目标”。根据我所做的研究，它正在尝试在数据到达之前进行映射。测试时，我可以控制台记录项目，但不能访问阵列。我最初使用axios，但是我使用fetch复制了相同的问题。我也尝试过有条件地渲染组件无济于事。我也在使用'useEffect'。感谢您的帮助。

我的状态（我尝试过使用空对象和数组进行初始化）：

const [projs,setProjs] = useState({});

我的提取

    async function getProjects(){
    await fetch(`${config.api.invokeUrl}/users/${11111}`)
       .then(res => res.json())
       .then(data => {
           setProjs(data);
       });

};

我的地图功能：

    useEffect(() => {
    // fetchProjects();
    getProjects();

  },[]);

  let index = 0;

  
const createGoal =  projs[current].goals && projs[0].goals.map(goal => {
    return <Goal 
        goalDetails={goal} 
        projectManager={projectManager}
        index={index++}
        />
})

。 console.log（“ projects”，projs.projects）

返回一系列项目

console.log("projects",projs.projects[0])

返回“无法读取未定义的属性'0'”

谢谢

解决方法

我意识到与.sync的async / await是多余的，所以我将获取更改为：

    async function getProjects(){
    let response = await fetch(`${config.api.invokeUrl}/users/${11111}`);
    let data = await response.json();
    setProjects(data.projects)
     };
 

创建了一个目标变量，并为其创建了一个三元变量：

    const goals = projects[current].goals
let createGoal = goals ? goals.map(goal => {
    return <Goal 
        goalDetails={goal} 
        projectManager={projectManager}
        index={index++}
        />
})
: 'loading'

最后，我不得不将我的初始状态更改为数组中的对象。如果只是一个空数组，对象或null，它将无法工作

    const [projects,setProjects] = useState([{}]);