javascript - React Native:[未处理的承诺拒绝:错误:无效的钩子调用。Hooks 只能在函数组件的主体内部调用
问题描述
我是 React Native 的新手,这是我第一个使用 React Native 从头开始构建的项目。我有一个警告问题,我想要的功能不起作用。
以下是我想要的一些解释:我有一个对象数组,我将其命名为购物车,在购物车内它看起来像:
let carts = [
{
merchantId: 1,
items: [
{
productId: 1,
productQty: 1,
},
{
productId: 2,
productQty: 5,
},
],
},
{
merchantId: 2,
items: [
{
productId: 3,
productQty: 2,
},
{
productId: 4,
productQty: 4,
},
],
},
];
这是我的屏幕:
import React, { useState, useEffect } from 'react';
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
TouchableOpacity,
} from 'react-native';
import { Button } from 'react-native-paper';
import { theme } from '../../../infrastructure/theme';
import SpacerComponent from '../../../components/SpacerComponent';
import { FontAwesome5 } from '@expo/vector-icons';
import MerchantCardComponent from '../components/MerchantCardComponent';
import { tranformCartArray } from '../../../services/carts/CartTransform';
const CartScreen = ({ navigation }) => {
const [carts, setCarts] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const getCarts = async () => {
setIsLoading(true);
const response = await tranformCartArray();
setCarts(response);
setIsLoading(false);
};
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
getCarts();
});
return unsubscribe;
}, [navigation]);
console.log(carts);
if (carts.length === 0) {
return (
<View style={styles.emptyContainter}>
<Image
style={styles.imageCart}
source={require('../../../assets/images/empty_cart.png')}
/>
<Text style={styles.emptyCartText}>
Keranjangnya masih kosong nih !
</Text>
<SpacerComponent size="xlarge" />
<Button
style={styles.buttonExplore}
mode="contained"
size={20}
onPress={() => navigation.navigate('Merchants')}
>
<FontAwesome5
name="shopping-cart"
size={20}
color={theme.colors.text.inverse}
/>
<Text>{' '}</Text>
<Text style={styles.buttonText}>Eksplor</Text>
</Button>
</View>
);
}
if (isLoading) {
return (
<View style={styles.emptyContainter}>
<ActivityIndicator
color={theme.colors.ui.primary}
size={theme.sizes[3]}
/>
</View>
);
}
return (
<ScrollView style={styles.container}>
{carts.map((merchantAndItems) => {
return (
<TouchableOpacity onPress={() => navigation.navigate('Checkout')}>
<MerchantCardComponent
merchantAndItems={merchantAndItems}
key={merchantAndItems.merchantId}
/>
</TouchableOpacity>
);
})}
</ScrollView>
);
};
export default CartScreen;
const styles = StyleSheet.create({
emptyContainter: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
backgroundColor: theme.colors.bg.primary,
},
imageCart: {
maxWidth: '90%',
maxHeight: '45%',
aspectRatio: 1,
},
emptyCartText: {
fontSize: 20,
fontFamily: theme.fonts.regular,
},
buttonExplore: {
backgroundColor: theme.colors.ui.primary,
},
buttonText: {
fontSize: 20,
},
container: {
flex: 1,
marginBottom: 10,
},
});
我想在将数组的购物车转换为 MerchantCardComponent 后传递,我想要的转换类型是数组(购物车)变为:
let carts = [
{
merchantId: 1,
merchantName: 'Merchant A',
merchantLogo: 'https://assets.backend.com/merchants/1/logo_url.jpg',
items: [
{
productId: 1,
productName: 'Product One',
productImage: 'https://assets.backend.com/merchants/1/products/1/product_image.jpg',
productPrice: 2000,
productQty: 1,
},
{
productId: 2,
productName: 'Product Two',
productImage: 'https://assets.backend.com/merchants/1/products/2/product_image.jpg',
productPrice: 2000,
productQty: 5,
},
],
},
{
merchantId: 2,
merchantName: 'Merchant B',
merchantLogo: 'https://assets.backend.com/merchants/2/logo_url.jpg',
items: [
{
productId: 3,
productName: 'Product Three',
productImage: 'https://assets.backend.com/merchants/2/products/3/product_image.jpg',
productPrice: 2000,
productQty: 2,
},
{
productId: 4,
productName: 'Product Four',
productImage: 'https://assets.backend.com/merchants/4/products/4/product_image.jpg',
productPrice: 2000,
productQty: 4,
},
],
},
];
这样我就可以轻松地打印出文本,而无需在屏幕上再次获取后端。我已经为转换购物车功能制作了一个单独的文件,这里是代码:
import React, { useContext, useState } from 'react';
import CartsContext from './CartsContext';
import {
doRequestMerchantDetail,
doRequestProductDetail,
} from '../merchants/MerchantsService';
export const tranformCartArray = async () => {
const [transformCart, setTransformCart] = useState([]);
const [afterTransform, setAfterTransform] = useState(null);
const [items, setItems] = useState([]);
const { carts } = useContext(CartsContext);
for (let i = 0; i < carts.length; i++) {
let [errMerchant, merchant] = await doRequestMerchantDetail(
carts[i].merchantId,
);
for (let j = 0; j < cart[i].items.length; j++) {
let [errProduct, product] = await doRequestProductDetail(
carts[i].items[j].productId,
);
if (product) {
setItems(
...items,
...[
{
productName: product.product_name,
productQty: carts[i].items[j].productQty,
productPrice: product.product_price,
productId: carts[i].items[j].productId,
productImage: product.product_image_url,
},
],
);
} else {
setItems(
...items,
...[
{
productName: 'Error',
productQty: carts[i].items[j].productQty,
productPrice: 'Error',
productId: carts[i].items[j].productId,
productImage:
'https://cdn.pixabay.com/photo/2021/07/21/12/49/error-6482984_960_720.png',
},
],
);
}
}
if (merchant) {
setAfterTransform({
merchantName: merchant.name,
merchantLogo: merchant.merchant_logo_url,
merchantId: carts[i].merchantId,
items,
});
} else {
setAfterTransform({
merchantName: 'Error',
merchantLogo: 'Error',
merchantId: carts[i].merchantId,
items,
});
}
setTransformCart(...transformCart, ...[afterTransform]);
}
return transformCart;
};
解决方案
tranformCartArray
不是一个反应组件或自定义反应钩子,所以你不能使用useState
和useContext
钩子。
此外,抛出“未处理的拒绝”是因为getCarts
声明了函数,async
因此它隐式返回一个 Promise,并且当抛出 React hooks 错误时,没有任何catch
块或.catch
Promise 链来捕获和处理它。
我建议将carts
状态从上下文传递到tranformCartArray
实用程序函数中,并返回一个增强的购物车数组。这允许您从函数中删除任何和所有钩子。
export const tranformCartArray = async (carts) => {
const newCarts = [];
for (let i = 0; i < carts.length; i++) {
let [, merchant] = await doRequestMerchantDetail(
carts[i].merchantId,
);
const newItems = [];
for (let j = 0; j < carts[i].items.length; j++) {
let [, product] = await doRequestProductDetail(
carts[i].items[j].productId,
);
newItems.push({
productName: product?.product_name ?? 'Error',
productQty: carts[i].items[j].productQty,
productPrice: product?.product_price ?? 'Error',
productId: carts[i].items[j].productId,
productImage: carts[i].items[j].product_image_url,
});
}
newCarts.push({
merchantName: merchant?.name ?? 'Error',
merchantLogo: merchant?.merchant_logo_url ?? 'Error',
merchantId: carts[i].merchantId,
items: newItems,
});
}
return newCarts;
};
购物车屏幕
const CartScreen = ({ navigation }) => {
const [carts, setCarts] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const { carts: contextCarts } = useContext(CartsContext); // <-- access context
const getCarts = async () => {
setIsLoading(true);
try {
const response = await tranformCartArray(contextCarts); // <-- pass context carts value
setCarts(response);
} catch(error) {
// handle any errors?
} finally {
setIsLoading(false);
}
};
...
推荐阅读
- excel - 具有 3 个嵌套循环的 Excel VBA
- r - 纹理 geom_ribbon 类似于 barplot,具有参数 a) 密度和 b) 角度
- python - Django 教程第 3 部分
- java - 如何在 Wildfly 10.1.0 中访问 ActiveMQ Web 控制台?
- c# - 如何在 Entity Framwowrk Core 中为代码优先方法创建一个新表
- reactjs - useEffect 没有调用合适的时间,所以 useEffect 中的 useState 不起作用
- android - 依次调用多个函数时,Android YouTube API YouTubePlayer 无法正常工作
- javascript - 对齐 AppBar 项目 - Material UI 和 React
- rust - rust 中返回的值如何?
- java - Java 类存储大量属性的最干净/最有效的方式