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)
}
}