ReactJS使用未定义的变量，即使在检查它是否未定义之后也是如此

Question

productList是redux状态的一个数组，它是产品的实际数组。cart是一个产品ID数组。我将productsToRender设置为存储产品ID，然后在ids变量中提取它们。在useEffect中，我正在查找购物车中的实际产品。主要问题是，我的if statements没有正确检查变量是否为空数组或null或未定义，代码开始执行jsx的最底层，我实际使用的是products状态变量[undefined, undefined, undefined]。因此抛出错误。

更新了useEffect，productList是[]，如果语句未正确检查，则打印Effect, after if statement [productList] []

const ProductList = ({ productList, cart }) => {
const [products, setProducts] = React.useState(null)
const productsToRender = cart.products
const ids = productsToRender.map(p => p.productId)
React.useEffect(() => {
console.log("Effect [ids]", ids);
console.log("Effect [productList]", productList);
if (!productList || productList.length === 0) {
console.log("Effect, after if statement [productList]", productList);
let ps = ids.map(id => {
let product = productList.find(p => p.id === id)
if (Product) return product
})
setProducts(ps)
}
}, [productList])
if (!products || products.length === 0) {
console.log("Products null or l0", products);
return <Loading />
}

... some more jsx

const mapStateToProps = state => {
return { productList: state.products };
};
export default connect(
mapStateToProps,
{}
)(ProductList);

Answer 1

要查找的内容

1. ps = ps.filter(p => p === undefined)应为ps = ps.filter(p => p !== undefined)
2. p.id === idp.id和id应为相同类型

如果这不能解决问题，请公布每个道具中包含的数据。

Answer 2

if (!productList || productList.length === 0)应为if (!productList || productList.length !== 0)

Answer 3

您的if语句声明

!productsList || productList.length === 0

这本质上意味着，如果productsList数组为null或的长度为0，意味着为空，则将运行if语句代码，我认为productsList数组就是这样。

因此，将if语句更改为：

!productsList || productList.length !== 0应解决该问题。

谢谢，

Arjis Chakraborty。