Reactjs typescript i.map 不是函数答案

【问题标题】：Reactjs typescript i.map is not a functionReactjs typescript i.map 不是函数
【发布时间】：2021-02-15 08:54:31
【问题描述】：

我试图用这个来显示 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 || '{}'));
    })
  }, [])

它适用于我的浏览器

但在移动版本上我收到此错误

我不明白为什么这只发生在移动版本上。

【问题讨论】：

看来您正在登陆第二个区块，即catch。因此，由于存储空间为空，您将登录列表设置为一个对象。在代码中，您在 JSX 中对这个对象执行 .map 以呈现列表。这将失败，因为您的登录列表现在是一个对象而不是一个数组。
移动版似乎无法访问 api localhost:8443/api/logins（检查上面的错误），因此您没有得到任何响应。

标签： reactjs typescript axios

【解决方案1】：

通过修复连接问题解决

【讨论】：