时间戳

首页 > 解决方案 > Javascript无法遍历数组

javascript - Javascript无法遍历数组

问题描述

我有一个数组，浏览器没有对其进行迭代，而是说 data.map() 不是一个函数。我发现的所有答案都说当数据不是数组时会出现这个问题，但我的数据肯定是数组。

奇怪的是，这仅在从 url 获取数据时发生，但是当我使用所获取数据的保存 .json 文件时，程序运行良好。我认为我在获取数据时没有做错任何事情 - 我得到这样的数据 -


export default function useFetch(url) {
  const [state, setState] = useState({
    data: "",
    loading: true,
  });

  useEffect(() => {
    setState((state) => ({
      data: state.data,
      loading: true,
    }));

    fetch(url)
      .then((x) => {
        if (x.ok) {
          return x.json();
        }
      })
      .then((y) => {
        setState({
          data: y,
          loading: false,
        });
      });
  }, [url, setState]);

  return state;
}

在另一个组件中，我给一个常量一个值：

const { data, loading } = useFetch(url);

然后它会使我的程序崩溃，说它 data.map() 不是一个函数

但是，当我手动转到相同的 url，并保存那里的 JSON 文件，然后使用该文件而不是 fetch 时，程序运行得很好。const data1 = require("../data.json");

所以我有一个案例，其中 data.json 与我从 fetch 请求中获得的数据完全相同，而 fetch 请求本身却没有。不仅如此，我还可以为 data[0].name 和其他类似的东西创建控制台日志。

最后一个问题是，今天早上，程序也在使用 fetch 版本本身，我只是保存了 .json 文件并开始使用它们，因为我不想继续向服务器发送请求。在某个时候，我想开始用实际的 feth 响应来测试它，然后它就不再起作用了。

作为最后一点信息 - 当我使用保存的 .json 文件编译程序，然后更改代码以使用获取的数据并保存时，我的程序不会崩溃，我可以使用相同的以及其他获取的数据直到我刷新浏览器，此时我再次收到错误。

标签： javascriptjsonreactjs

解决方案

考虑初始化状态为

{
    data: [],
    loading: true,
  }

推荐阅读