Блог

Главная - Вопросы по программированию - Reactjs typescript i.map не является функцией

Reactjs typescript i.map не является функцией

#reactjs #typescript #axios

#reactjs #typescript #axios

Вопрос:

Я пытаюсь отобразить массив json с помощью этого:

 <ul className={classes.ul}>
      {logins.map((login) => (
        <li className={classes.item} key={login.id}>
          <Paper className={classes.paper}>
            <Grid container>
              <Grid item xs={12}>

                <Typography variant="h6" gutterBottom>
                  {login.test}
                </Typography>
                <Typography variant="caption">
                  {login.test}
                </Typography>

              </Grid>
            </Grid>
          </Paper>
        </li>
      ))}
    </ul>

функция выборки:

  const [logins, setLoginsList] = useState<Login[]>([]);

  useEffect(() => {
    axios.get<Login[]>('https://localhost:8443/api/logins')
    .then((response) => response.data)
    .then((json) => {
      setLoginsList(json)
      localStorage.setItem("logins", JSON.stringify(json))
      console.log(json.map(login => (login.id)))
    })
    .catch(err => {
      let collection = localStorage.getItem("logins");
      setLoginsList(JSON.parse(collection || '{}'));
    })
  }, [])

он работает в моем браузере
настольная версия

но в мобильной версии я получаю эту ошибку мобильная версия

я не понимаю, почему это происходит только в мобильной версии.

Комментарии:

1. Похоже, что вы попадаете во второй блок, catch. Поэтому, поскольку хранилище пусто, вы устанавливаете свой список входа в объект. Далее в коде вы выполняете .map для этого объекта в JSX для отображения списка. Это приведет к сбою, поскольку ваш список логинов теперь является объектом, а не массивом.

2. похоже, что мобильная версия не имеет доступа к локальному хосту api: 8443/api/ logins (проверьте ошибки выше), таким образом, вы не получаете никакого ответа.

Ответ №1:

решается путем устранения проблемы с подключением