Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

A propriedade 'id' não existe no tipo 'never'. React Native com TypeScript [closed]

$
0
0

VSCode está apontando dois tipos de erro para que eu possa carregar dados do banco no projeto ReactNative com TypeScript.

Meu arquivo:

    import React from 'react';import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';import AnimalService from '../services/animal.service';import Icon from 'react-native-vector-icons/Ionicons';import { Animal } from '../models/animal.model';export default class App extends React.Component {    constructor(props) {        super(props);        this.findAllAnimal()    }    state = {        data: [],        value: null,        onChangeText: null,        dataId: null,        dataInsert: null    }    //acionado quando o componente e montado    componentDidMount () {        this.findAllAnimal ();    }    //escuta atualizações na lista    componentDidUpdate (prevProps, prevState) {        if (prevState.data !== this.state.data) {          this.findAllAnimal ();        }    }    deleteAnimal=(id)=> {        this.findAnimalById(id)        if (this.state.dataId != null || this.state.dataId != undefined) {            AnimalService.deleteById(id)            alert("animal excluido com sucesso: ")        }    }    insertAnimal=(item)=> {        let file:Animal=new Animal()        file.nome=item        const insertId=AnimalService.addData(file);        if(insertId==null || insertId==undefined){            alert("Não foi possivel inserir o novo animal")        }    }    findAnimalById=(id)=> {        AnimalService.findById(id)            .then((response: any) => {                if (response._array.length >0 && response!= null && response!= undefined) {                    this.setState({                        dataId: response._array[0]                    })                } else {                    alert("id não encontrado")                }            }), (error) => {                console.log(error);            }    }    findAllAnimal=()=> {        AnimalService.findAll()            .then((response: any) => {                this.setState({                    data: response._array,                    isLoading: false,                })            }), (error) => {                console.log(error);            }    }    render() {        //extrai as propriedades entre chaves        const {data,value,dataInsert} = this.state;        const animalList = data.map((item, key) => {            return (<><Text >id:{item.id} nome:{item.nome}</Text></>            )        })        return (<View style={styles.container}><Text style={{ fontSize: 20, paddingBottom: 20 }}>Lista de Animais</Text><TextInput                    placeholder="digite o id"                    style={styles.textInput}                    onChangeText={text => { this.setState({ value: text }) }}                    value={value}                /><View style={styles.containerTouch}><TouchableOpacity onPress={() => { value == null ? alert("O campo de id não pode ser vazio") : this.deleteAnimal(value) }} style={{ alignItems: "center", backgroundColor: 'green' }}><Icon name="md-remove" size={30} color="white" /></TouchableOpacity></View><TextInput                    placeholder="digite o nome do novo animal"                    style={styles.textInput}                    onChangeText={textAdd => { this.setState({ dataInsert: textAdd }) }}                    value={dataInsert}                /><View style={styles.containerTouch}><TouchableOpacity onPress={() =>  dataInsert == null ? alert("O campo de nome não pode ser vazio") :this.insertAnimal(dataInsert)} style={{ alignItems: "center", backgroundColor: 'green' }}><Icon name="md-add" size={30} color="white" /></TouchableOpacity></View>                {animalList}</View>        );    }    }const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: '#fff',        alignItems: 'center',        justifyContent: 'center',    },    textInput:{        alignItems: "center",         width: 200,         height: 40,         borderColor: 'gray',         borderWidth: 1     },    containerTouch:{        width: 200,         padding: 10    }});

Erro que apresenta:

  1. Nenhuma sobrecarga corresponde a esta chamada.A sobrecarga 1 de 2, '(props: TextInputProps | Readonly): TextInput', gerou o seguinte erro.O tipo 'null' não pode ser atribuído ao tipo 'string | undefined'.A sobrecarga 2 de 2, '(props: TextInputProps, context: any): TextInput', gerou o seguinte erro.O tipo 'null' não pode ser atribuído ao tipo 'string | undefined'.Esse erro 1 acontece na props value abaixo

    <TextInputplaceholder="digite o id"style={styles.textInput}onChangeText={text => { this.setState({ value: text }) }}value={value}

  2. A propriedade 'id' não existe no tipo 'never'.

  3. A propriedade 'nome' não existe no tipo 'never'.

O erro 2 e 3 acontece nesse trecho abaixo

const animalList = data.map((item, key) => {        return (<><Text >id:{item.id} nome:{item.nome}</Text></>        )    })

Alguém sabe me explicar o porque e qual seria minha solução para esse problema?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>