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

【问题标题】：I can view array data but cannot access it after fetch我可以查看数组数据，但在获取后无法访问它
【发布时间】：2020-08-13 16:32:42
【问题描述】：

我有一个函数可以根据数组中的项目数（目标）创建一个组件。我不断收到一个错误，即该函数无法映射未定义的“目标”。根据我所做的研究，它试图在数据出现之前进行映射。测试时，我可以控制台记录项目但无法访问阵列。我最初使用的是 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’”

谢谢

【问题讨论】：

标签： arrays dictionary fetch undefined

【解决方案1】：

我意识到带有 .then 的 async/await 是多余的，所以我将 fetch 更改为：

    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([{}]);

【讨论】：