有没有办法解决这个问题"undefined is not an object (evaluating 'data.products.map')"？

Question

我的React App通过API .js从django REST API中提取数据下面文件。

api.js

const URLS = {
PRODUCTS: "http://127.0.0.1:8000/api/products/",
PRODUCT: (id) => `http://127.0.0.1:8000/api/products/${id}`,
};
const wrappedFetch = (...args) => {
return fetch(...args).then((res) => {
return res.json();
});
};
const get = (url) => wrappedFetch(url);

// PRODUCT API
const loadProducts = () => get(URLS.PRODUCTS);
const loadProduct = (id) => get(URLS.PRODUCT(id));
export {
loadProducts,
loadProduct,
};

数据在第一次加载时没有成功呈现，并在我的useAllProducts.js中识别一个问题下面文件。

import { useQuery } from "react-query";
import { loadProducts } from "./api/api";
function useAllProducts() {
const { data = [] } = useQuery("products", loadProducts);
console.log(data)

return data.products.map(({ id }) => id);
}
export default useAllProducts;

错误是undefined is not an object (evaluating 'data.products.map')

在<<p> strong> useAllProduts.js 一旦我将return data.products.map(({ id }) => id);改为return data.map(({ id }) => id);，再回到return data.products.map(({ id }) => id);，产品渲染成功。

用

代替return data.products && products.map(({ id }) => id);

不能解决错误。

当我刷新页面时，同样的错误仍然存在(undefined is not an object (evaluating 'data.products.map')。我认为我的应用程序渲染数据之前，它被填充，可能需要添加一个条件或async/await在我的api.js.

我如何解决这个问题:我已经尝试添加async/await，但我觉得我犯了错误，因此没有工作。

我知道有类似的问题，但我的api.js

请帮帮我。

Answer 1

return data.products && products.map(({ id }) => id);不正确，因为products.map中没有定义products。你会想做一些更像return data.products && data.products.map(({ id }) => id);的事情。

当数据尚未被获取时的初始渲染(和缓存))data.products未定义。当您将代码更改为data.map(({ id }) => id);并返回并正常工作时，很可能钩子能够读取缓存的响应并且定义了data.products。

如果您希望获取的数据具有一个products属性，即数组，那么您可以提供一个更好的回退值，并对可能未定义的属性访问使用null检查。

例子:

function useAllProducts() {
const { data = { products: [] } } = useQuery("products", loadProducts);

return (data.products ?? []).map(({ id }) => id);
}

function useAllProducts() {
const { data } = useQuery("products", loadProducts);

return (data?.products ?? []).map(({ id }) => id);
}

Answer 2

import { useQuery } from "react-query";
import { loadProducts } from "./api/api";
function useAllProducts() {
const { data = [] } = useQuery("products", loadProducts);
console.log(data)

return data.products ? data.products.map(({ id }) => id) :[];
}
export default useAllProducts;