Tengo este componente simple en React-Native. Mi objetivo es omitir la iteración si el argumento dado gradeIsMandatory es falso, solo debe iterar sobre la garantía y el precio . ¿Cómo puedo lograr este resultado sin afectar el rendimiento? tomare cualquier consejo gracias
import React, { useCallback } from 'react'; import { View, Text, SafeAreaView, SectionList, StyleSheet, Image, TouchableOpacity, Alert} from 'react-native'; export const ModalHeader: React.FC<{}> = () => { const gradeIsMandatory = false //code I tried to use useEffect(()=>{ if(!gradeIsMandatory){ let appendGrade = { key: 'grade', title: 'Grade' } modalTabs.push(appendGrade) } },[]) return ( <View> <View> <View> {modalTabs.map((tab, i) => ( <TouchableOpacity> <Text>{tab.title}</Text> </TouchableOpacity> ))} </View> </View> </View> ); } const modalTabs = [ { key: 'warranty', title: 'Your Waranty' }, { key: 'price', title: 'Your price' } ]Pruebe con un anexo condicional.
const extendedTabs = [...modalTabs, ...(gradeIsMandatory ? [{ key: 'grade', title: 'Grade' }] : [] )];No puede omitir una iteración del mapa. Sin embargo, puede devolver <Fragment /> si no se cumple la condición de su mapa.
este useEffect se ejecutará una vez justo después de la primera representación del componente, manipular modalTabs no hará nada porque modalTabs no es un estado de este componente. la forma correcta es:
import { useState, useEffect } from "react"; const modalTabsInitialValue = [ { key: "warranty", title: "Your Waranty" }, { key: "price", title: "Your price" } ]; export default (props) => { const [modalTabs, setModalTabs] = useState(modalTabsInitialValue); useEffect(() => { if (props.gradeIsMandatory) { setModalTabs((prevModalTabs) => { const appendGrade = { key: "grade", title: "Grade" }; return [...prevModalTabs, appendGrade]; }); } }, [props.gradeIsMandatory, setModalTabs]); return { ... } };Actualización: esta no es la mejor solución para este problema, la respuesta correcta como dijo el alféizar de la ventana es una simple const: respuesta