Soy nuevo en el uso de mecanografiado con reaccionar. Tengo una aplicación donde llamo a una API y configuro la respuesta a un estado. He creado un tipo genérico para llamadas api de la siguiente manera.
const responseBody = <T>(response: AxiosResponse<T>) => response.data; const restApiCalls = { get: <T>(url: string) => axios.get<T>(url).then(responseBody), post: <T>(url: string, body: {}) => axios.post<T>(url, body).then(responseBody), put: <T>(url: string, body: {}) => axios.put<T>(url, body).then(responseBody), }; const users = { getUsers: () => restApiCalls.get<Users[]>("https://jsonplaceholder.typicode.com/users"), }; const apis = { users, }; export default apis; La función getUser() llama a la solicitud de obtención y devuelve una lista de Users
La siguiente es la User interface
export interface Users { id: boolean; name: string; username: string; email: string; address: Address; phone: string; website: string; company: Company; } interface Address { street: string; suite: string; city: string; zipcode: string; geo: Geo; } interface Geo { lat: string; lng: string; } interface Company { name: string; catchPhrase: string; bs: string; } Al llamar a la API, la API devuelve los datos con éxito y asigné los datos devueltos al estado usando el método setUser .
El siguiente es el estado.
const [user, setUser] = useState<Users[]>();Asigné los datos obtenidos al estado de la siguiente manera.
useEffect(() => { const fetchData = async () => { const res = await apis.users.getUsers(); setUser(res); }; fetchData(); }, []); cuando se consola el estado del user , los datos están allí y se registran correctamente. Pero quiero verificar la longitud del estado del usuario en una condición if. Si reviso la longitud, muestra el siguiente error.
Object is possibly 'undefined'.ts(2532)Este es el código que usé para verificar la longitud.
const someFunction= () => { if (user?.length > 1) { for (let index = 0; index < user?.length; index++) { console.log(user[index]) } } }; Pero si configuro el tipo de estado en any en lugar de User[] , funciona. ¿Cuál podría ser el problema?
Todas las expresiones con users pueden resolverse como undefined , que no se puede comparar con un número y no se puede indexar. Por ejemplo user?.length podría no estar definida (si user no está definido); lo mismo con user[index]
Necesita manejar el caso indefinido. Por ejemplo:
const someFunction= () => { if(!user) { return; } if (user.length > 1) { for (let index = 0; index < user.length; index++) { console.log(user[index]) } } };