0

Olá, Pessoal! Estou estudando react native e me deparei com um problema que não consegui resolver, tentei de todas as maneiras e procurei em vários lugares :(

Tenho uma lista de funcionários e cada funcionário possui um id, nome, cargo e setor. As operações de listagem e exclusão estão funcionando, porém, estou querendo fazer a operação de edição. para isso eu preciso do id do funcionário. Não estou conseguindo passar esse id para a outra tela, que seria a de edição do mesmo.

Este é o código até o momento:

return (

        <FlatList
            data={colaboradores}
            keyExtractor={item=>item.id}
            renderItem={({ item }) => (
                <View style={styles.item}>
                    <Text style={styles.nome}>{item.nome}</Text>
                    <Text style={styles.cargo}>{item.cargo}</Text>
                    <View style={styles.touchOpacity}>
                        <TouchableOpacity style={styles.buttonEditar} id={item.id} onPress={()=>navigation.navigate('EditarColaboradores')}>
                            <Text style={styles.textButton}>Editar</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.buttonExcluir} onPress={()=>excluiColaborador(item.id)}>
                            <Text style={styles.textButton}>Excluir</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            )} />

    )

Este é o arquivo de edição:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
    View,
    Text
} from 'react-native';

const EditarColaborador = (props)=>{

    return(
        <View>
            <Text>
                Editar Colaborador
            </Text>
            {
                console.log(props.id)
            }
        </View>
    )

}

export default EditarColaborador

Eu achei que escrevendo uma propriedade chamada ID no botão e "recebendo" ela no 'props' do arquivo destinatário iria resolver o problema. mas o valor de props.id é "undefined"

1 Resposta 1

3

Você precisa passar os parâmetros pela rota utilizando o navigation do react navigation, adicionando um objeto com as informações:

navigation.navigate('Home', { post: postText });

Para pegar na próxima pagina basta utilizar o route.params

 const {post} = route.params;

ou

const {post} = props.route.params;

Também não acho uma boa ideia utilizar um console.log dentro do seu jsx, basta printar só o Id mesmo interpolando com chaves: { id } ou { props.id }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .