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:
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}
A propriedade 'id' não existe no tipo 'never'.
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?