Estoy tratando de renderizar algunas cadenas, pero recibo un error, ¿alguien sabe cómo resolverlo?
código:
const FormScreen = ({route}) => { const [userForm, setuserForm] = useState([]); useEffect(() => { if (userForm.length > 0) { console.log('userform',userForm,userForm.length); // not get inside here gives me a eror before it return } else{ setuserForm(route.params.paramKey); console.log('TEST',userForm,'LENG',userForm.length)} // returns => TEST [] LENG 0 },[userForm]) return ( <SafeAreaView style={{flex: 1}}> <View style={styles.container}> <Text style={styles.textStyle}>COLLECTION :</Text> {userForm.length > 0 ? ( userForm.map((item) => ( <Text key={uuid.v4()}>{item.fields}</Text> )) ) : ( <Text key={uuid.v4()}> Loading ... </Text> )} {..} route.params.paramKey es una cadena
route.params.paramKey cadena es = {"objeto":"CLMobj_test","fields":["abcs","test"],"type":["Date","Text"]}
Dado que route.params.paramKey es una cadena, no puede llamar al map directamente. Si desea seguir adelante con este enfoque, puede hacer algo como esto:
setuserForm([...route.params.paramKey]);EDITAR: después de agregar
route.params.paramKey = {"objeto":"CLMobj_test","fields":["abcs","test"],"type":["Date","Text"]}solo puedes configurar
setuserForm(JSON.parse(route.params.paramKey).fields)y usa el mapa en él
{userForm.length > 0 ? (userForm.map((item) => <Text key={uuid.v4()}>{item}</Text>): (<Text key={uuid.v4()}> Loading ... </Text>) }¿Puedes probar con este código? Ten en cuenta que he cambiado la condición "Usar efecto", y JSX también:
const FormScreen = ({route}) => { const [userForm, setuserForm] = useState([]); useEffect(() => { setuserForm(JSON.parse(route.params.paramKey)); },[]) return ( <SafeAreaView style={{flex: 1}}> <View style={styles.container}> <Text style={styles.textStyle}>COLLECTION :</Text> {!!userForm && userForm.fields.length > 0 ? ( userForm.fields.map((item) => ( <Text key={uuid.v4()}>{item}</Text> )) ) : ( <Text key={uuid.v4()}> Loading ... </Text> )}