I am doing a project in React, where after I type a value and then click on search button, the app searches if the id exists in the database. If so, it displays the result of the search in the same page. I am having trouble assigning the value of the search and then displaying it. When I try to assign the result of the search to an array, it gives me the error:
Type 'DocumentData[]' is not assignable to type 'Dispatch<SetStateAction<Identification[]>>'. Type 'DocumentData[]' provides no match for the signature '(value:SetStateAction<Identification[]>): void'.
When I did a console.log of just the data in no variable, I can get the results, but I need it in the setId variable.
Here is the code:
import React, {ChangeEvent} from "react"; import { useState,useEffect } from "react"; import LongText from "../atoms/LongText"; import AppListBI from "./AppListBI"; import {Identification} from "../../assets/Person/Person"; import db from "../../firebase.config" const Core = () => { var [input, setInput] = useState('') const [showResults, setShowResults] = React.useState(false) var [person, setId] = useState<Identification[]>([]); const fetchBI = async () => { const ref=db.collection('id').where('numberId','==',input).get().then((snapshot) => { snapshot.docs.forEach(doc =>{ setId=[...person,doc.data()] //I also tried setId=doc.data() }) }) } return ( <> <div className="mx-7"> <span className="font-bold text-xl"><h5>Pesquisar:</h5></span></div> <div className="flex justify-center"> <LongText placeholder="Pesquisar Id" onChange={ (e: ChangeEvent<HTMLInputElement>)=>setInput(e.target.value)} onClick={useEffect(()=>{ setShowResults(true) fetchBI(); })}/> </div> <div className="flex justify-center"> <span className="my-4 w-11/12"> { showResults ? <AppListId persons={person} /> : null } </span> </div> </> ); } export default Core;
Advertisement
Answer
After long days I found the solution: I traded this:
const fetchBI = async () => { const ref=db.collection('id').where('numberId','==',input).get().then((snapshot) => { snapshot.docs.forEach(doc =>{ setId=[...person,doc.data()]
to:
const fetchBI = async () => { try{ var people : ID[] = [] await db.collection('id').where('numberId','==',input).get().then( querySnapshot=>{ const data = querySnapshot.docs.map( doc=>{ let dat = doc.data() people.push({ numberId: dat.numberId, name: dat.name, dateOfBirth: dat.dateOfBirth, placeOfBirth: dat.placeOfBirth, fathersName: dat.fathersName, mothersName: dat.mothersName, gender: dat.gender, profession: dat.profession, dateOfIssue: dat.dateOfIssue, expirationDate: dat.expirationDate }) }) setId(people) } ) }catch (error) { console.log(error.message) } }