条件渲染不等待 axios 数据获取

Question

我试图做的是使用 axios 获取数据，然后将数据设置为 state。一旦结束，我将加载标志设置为 false，并有条件地呈现一个子组件，我想在其中检索数据数组第一项的属性。

这是我的自定义钩子代码。我只是获取产品数据并设置数据。

export const useAllProducts = () => {
// const { showMessage } = useMessage();
const [loading, setLoading] = useState(false);
const [products, setProducts] = useState<Array<Product>>([]);
const getProducts = useCallback(() => {
setLoading(true);
axios
.get<Array<Product>>("http://localhost/api/admin/products")
.then(res => setProducts(res.data))
.catch(() =>
console.log('failed to fetch product data')
)
.finally(() => setLoading(false));
}, []);
return { getProducts, loading, products };
};

这是我的产品页面。加载完成后，它会渲染产品列表组件，并将产品数据作为道具。

const ProductPage: React.FC = () => {
const { getProducts, loading, products } = useAllProducts();
useEffect(() => {
getProducts();
}, []);
return (
<CommonLayout title="product list">
{!loading ?
<ProductList title="product" data={products as Product[]} /> : 'loading'
}
</CommonLayout>
);
}
export default ProductPage;

在此之后，在产品列表组件中，我希望能够像这样访问属性名称。

const ProductList = <T,>(
props: React.PropsWithChildren<Props<T>>
) => {
console.log(props)
const classes = useStyles();
Object.keys(props.data[0])
return (
<div>
a
</div>
);
}

但是，它给了我一个错误，如下所示。

未

捕获的类型错误：无法将未定义或 null 转换为对象 at Function.keys () 在产品列表 (app.js：12755) at renderWithHooks (app.js：33809) at mountIndeterminateComponent (app.js：36488) 开始工作 (app.js：37602) at HTMLUnknownElement.callCallback (app.js：19194) at Object.invokeGuardedCallbackDev (app.js：19243) at invokeGuardedCallback (app.js：19298) 开始时工作$1 (app.js：42209) at performUnitOfWork (app.js：41160)

我什至先检查了数据的长度，但没有运气。

有没有人知道为什么条件渲染不起作用？

编辑1

这是我在评论后更改的自定义钩子代码。逻辑似乎很好..

export const useAllProducts = () => {
const [loading, setLoading] = useState(true);
const [products, setProducts] = useState<Array<Product>>([]);
const getProducts = useCallback(() => {
axios
.get<Array<Product>>("http://localhost/api/admin/products")
.then(res => {
setProducts(res.data)
setLoading(false)
})
.catch((error) =>
console.log(error)
)
}, []);
return { getProducts, loading, products };
};

编辑：2

我的简化产品列表组件代码。

const ProductList = <T, >(
props: React.PropsWithChildren<Props<T>>
) =>{
console.log(props)
const classes = useStyles();
Object.keys(props.data[0])
//The error is happening here//

Answer 1

这条线似乎有问题

loading 
? <ProductList title="product" data={products as Product[]} /> 
: 'loading'

当loading为真时，您正在显示产品列表。应该是另一种方式

loading 
? 'loading'
: <ProductList title="product" data={products as Product[]} />

此外，最好检查产品是否具有一些有效值

喜欢

loading || !products
? 'loading'
: <ProductList title="product" data={products as Product[]} />

甚至更好，

在ProductList检查data是否为 null 或未定义，并向用户显示No product found的通知。我认为只是更好的用户体验。

---

好的，所以这就是问题所在

Object.keys(props.data[0])

现在，猜猜当data = []时会发生什么？data[0]undefined.它不是一个对象，它是未定义的。

data = []; Object.keys(data[0])
VM633:1 Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at <anonymous>:1:19

更好的方法是(假设实际上，您希望通过迭代来呈现项目)。

data.map(d => console.log(Object.keys(d)))