0
252
Views¿Cómo configurar useRef current.value dentro de su componente nativo de reacción sin renderizar?
mi problema es que mi pantalla de detalles seguirá cargándose para recuperar la API cada vez que intento agregar cantidad usando Estado, es realmente molesto. hasta ahora, mi mejor opción es usar useRef para evitar que mi pantalla se renderice. ¿Hay algún consejo o mejor práctica para resolver este problema? mi objetivo es solo mostrar mi valor actual de userref, por favor, ayuda. gracias.
aquí está mi código:
export default function ProductDetail({route, navigation}) { const id = route.params.itemId; const {addToCarts, carts} = useStore(); const refQty = useRef(1); const handlerIncreaseQty = () => { refQty.current = refQty.current + 1; console.log(refQty.current); }; const handlerDecreaseQty = () => { if (refQty.current <= 1) { return; } refQty.current = refQty.current - 1; console.log(refQty.current); };aquí está mi renderizado:
<View style={tw`flex-1 border p-4 my-2 rounded-xl bg-yellow-300 `}> <View style={tw`flex-1`}> <Image style={{ width: '100%', height: '100%', resizeMode: 'center', }} source={{uri: `${data.image}`}} /> </View> <View style={tw`flex-1 my-1`}> <Text style={tw`bg-green-400 p-2`}>{data.description}</Text> </View> <View style={tw`flex-row justify-evenly`}> <View style={tw`flex-row items-center`}> <Button title="-" onPress={handlerDecreaseQty} /> <Text style={tw`mx-3`}>{refQty.current}</Text> <Button title="+" onPress={handlerIncreaseQty} /> </View> <View> <Button title="add to cart" onPress={() => handlerAddToCarts(data)} /> </View> <Button title="Go back" onPress={() => { navigation.goBack(); }} /> </View> </View>mi pantalla se parece a:
2 answers
Answer question0
Esto no es posible. Está intentando mostrar el valor actual de una ref mientras lo cambia dinámicamente en su interfaz de usuario. Para esto están los states por diseño del marco.
Una pantalla solo actualizará su información visualmente, esto significa que se vuelve a renderizar en un nuevo ciclo de renderizado, si su estado actual cambia de alguna manera.
Esto es por diseño. Si no desea que esto suceda, es posible que desee considerar un marco diferente.
Si tiene una llamada a la API que se activa cada vez que se vuelve a mostrar la pantalla, entonces tiene un problema diferente. Hay un patrón estándar para resolver esto.
React.useEffect(() => { // fetch data and set state // the dependency array is empty, thus this will only be called once }, []) Si usa un gancho que maneja sus llamadas API, entonces podría considerar agregar un application cache como SWR de Vercel .
0
const DetailsScreen = () => { const [quantity, setQuantity] = useState(1); const [product, setProduct] = useState(); useEffect(() => { const data = // get your data; setProduct(data); }, []); };Así es como debe estructurar su componente. Si esto no es lo que necesita, haga un comentario.