React find不是一个函数

Question

我有loadProducts和showProduct函数。loadProducts显示所有产品，而showProduct仅显示通过id定义的产品。

当我将showProduct(props.match.params.product(置于useEffect而不是loadProducts((品。find不是函数错误。我知道当我使用loadProduct时，它不会抛出这个错误，但我想使用getProductById(products，productId(中的showProduct函数。我尝试返回showProduct($productId(，但没有想要的结果。

这是我的功能是：

...
const [product, setProduct] = useState({ ...props.product });
useEffect(() => {
if (products.length === 0) {
loadProducts().catch(error => {
alert("Loading products details" + error);
});
} else {
setProduct({ ...props.product });
} 
}, [loadProducts, products.length, props.product]);
...
export function getProductById(products, productId) {
return products.find(product => product.id.toString() === productId) || null;
}
function mapStateToProps(state, ownProps) {    
const productId = ownProps.match.params.product;
const product = getProductById(state.products, productId) ;
return {
product,
products: state.products
};
}
const mapDispatchToProps = {
loadProducts, showProduct
};

有人对如何解决这种情况有什么建议吗？

Answer 1

尝试将代码更改为以下内容：

const [product, setProduct] = useState();
const productId = props.match.params.product;
useEffect(() => {
if (!products.length) {
loadProducts();
} else {
if (productId && product.length) {
const product = getProductById(products, productId);
setProduct(product);
}
}
}, [loadProducts, products, productId]);
export function getProductById(products, productId) {
return (
products.find((product) => product.id.toString() === productId) || null
);
}
function mapStateToProps(state, ownProps) {
return {
products: state.products
};
}
const mapDispatchToProps = {
loadProducts,
showProduct
};