My React App通过下面的api.js文件从Djano 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')
在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'）。我认为我的应用在填充数据之前呈现了数据，可能需要在我的API.js中添加条件或async/await。
如何解决这个问题：我尝试添加async/await，但我觉得我犯了个错误，因此没有工作。
我知道有类似的问题，但我的API文件是完全不同的。
请帮帮我。
2条答案
按热度按时间4xrmg8kj1#
return data.products && products.map(({ id }) => id);不正确，因为products在products.map中未定义。您可能希望执行类似return data.products && data.products.map(({ id }) => id);的操作。在初始渲染时，数据尚未被获取（和缓存）
data.products是未定义的。当您将代码更改为data.map(({ id }) => id);并返回并工作时，很可能钩子能够读取缓存的响应并定义了data.products。如果你期望获取的数据有一个
products属性，即数组，那么你可以提供一个更好的回退值，并对可能未定义的属性访问使用null检查。示例：
1mrurvl12#