Блог

У меня есть функция, которая создает компонент на основе количества элементов (целей) в массиве. Я продолжаю получать сообщение об ошибке, что функция не может сопоставить «цели» с неопределенными. Основываясь на проведенном мной исследовании, он пытается отобразить данные до того, как они появятся. При тестировании этого я могу консольно регистрировать проекты, но не могу получить доступ к массиву. Изначально я использовал axios, но повторил ту же проблему с помощью выборки. Я также пытался условно отобразить компоненты безрезультатно. Я также использую ‘useEffect’. Я был бы признателен за любую помощь в этом.

Мое состояние (я пробовал инициализировать как пустой объект, так и массив):

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

Моя выборка:

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

};

И моя функция map:

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

  }, []);

  let index = 0;

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

.
console.log(«проекты»,projs.projects)

возвращает массив проектов

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

возвращает «не удается прочитать свойство ‘0’ из неопределенного»

Спасибо

Я понял, что асинхронность / ожидание с помощью .then были избыточными, поэтому я изменил свою выборку на это:

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

Создал переменную goals и создал для нее троичную:

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

И, наконец, мне пришлось изменить свое начальное состояние, чтобы оно было объектом внутри массива. Это не сработает, если просто пустой массив, object или null

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