Array.length не определен при загрузке данных, что вызывает ошибку в реакции с использованием хуков - PullRequest
Новая
       4

Array.length не определен при загрузке данных, что вызывает ошибку в реакции с использованием хуков

0 голосов
/ 02 апреля 2019

Я новичок, чтобы реагировать (и на попытки использовать крючки).Я загружаю пользовательские данные и перебираю их, чтобы создать список этих пользователей.Когда я пытаюсь добавить значок, который возвращает количество элементов, связанных с пользователем, user.tasks.length считается неопределенным, что приводит к ошибке.

Если я удалю .length, имена клиентов будут успешно обработаны.Поэтому я предполагаю, что исходные данные не определены.Я могу console.log user.tasks, поэтому он загружается.Я установил обработчик значка с помощью (typeof user.tasks! == 'undefined'), но он не перерисовывается после загрузки данных и возвращает только результат else (null)?

Мои данные выглядят так: 

ListOfTeam.users = [
{ _id: objectId,
  firstName: string,
  tasks: [array of strings]
]

Я подумал, что useEffect повторно отображает весь DOM и, таким образом, повторно отображает этот список компонентов.Ошибка первоначального запуска разрушает какие-либо рендеры после загрузки данных?Является ли badgeHandler неправильным способом думать об этом? 

const Dashboard4 = () => {
    const [user, setUser] = useState({})
    const [ListOfTeam, setListOfTeam] = useState({ users: [] })

    useEffect(() => {
        axios.get('http://localhost:3001/api/users/me')
            .then(res => {
                setUser({ user: res.data })
            });

    }, [])

     useEffect(() => {
        const fetchData = async () => {
        const result = await 
                   axios.get('http://localhost:3001/api/users/userlist/',
            );
            setListOfTeam(result.data)
        }
        fetchData();
    }, [user]);

     const handleBadge = () => {
        if (typeof user.tasks !== 'undefined') {
            return user.tasks.length;
        } else {
            return null
        }
    }

return (
<div> 
  <List>
    {ListOfTeam.users.map(user => {
            return ( 
            <div key={user._id}>
                <Badge badgeContent={handleBadge()} color="primary">
                  <ListItem button >
                     <ListItemIcon>
                       <PeopleIcon />
                        </ListItemIcon>
                     <ListItemText primary={user.firstName} />
                  </ListItem>
                 </Badge>
              </div>);})}
   </List>
</div>

Ответы [ 2 ]

0 голосов
/ 02 апреля 2019

Не очень знаком с перехватчиками React, но они должны быть похожи на старые добрые реакции.

Все ваши асинхронные / ожидающие перемешаны, и использование обоих обещаний и асинхронных / ожидающих выглядит неправильно, вМое мнение.

Просто перепишите свои функции эффектов: 

  useEffect(async () => {
    const result = await axios.get('http://localhost:3001/api/users/me');
    setUser({ user: result.data });
  }, [])

   useEffect(async () => {
    const result = await axios.get('http://localhost:3001/api/users/userlist/');
    setListOfTeam(result.data);
  }, [user]);

Посмотрите, решит ли это ваши проблемы.

0 голосов
/ 02 апреля 2019

Похоже, что он пытается напечатать значения до того, как завершится запрос axios, в котором происходит присвоение данных. В противном случае несколько вещей для проверки:

A) Что возвращает запрос axios? Вы уверены, что там есть свойство tasks?

B) Какова цель Badge badgeContent = {handleBadge ()}? Помните, что здесь возвращается число или ноль, а не пользовательские данные.

C) Что касается проверки handleBadge, а не проверки того, является ли тип неопределенным, вы должны проверить, является ли он неопределенным или пустым. Поэтому я бы изменил это на: 

if (!user.tasks) {
    return null;
} else {
    return user.tasks.length;
}
...