0
402
VistasTypeScript: la propiedad 'nombre' no existe en el tipo 'cualquier []'
Por alguna razón, no puedo ejecutar mi aplicación React, debido al siguiente error:
TypeScript: la propiedad 'nombre' no existe en el tipo 'cualquiera []'.
Estoy exportando mi tipo de TS en función de mis datos de API:
export type CartItemType = { id: number; name: string; image: string; amount: number; chair: { name: string; colors: { white: { hex: string; }; }; }; };Obteniendo los datos:
const getProducts = async (): Promise<CartItemType[]> => await (await fetch("apiEndpoint")).json(); const [cartItems, setCartItems] = useState([] as CartItemType[]); const { data, isLoading, error } = useQuery<CartItemType[]>( "products", getProducts );Me gustaría seleccionar los datos obtenidos y lo estoy haciendo de esta manera:
const [selectedData, setSelectedData] = React.useState([]); {data?.map((item) => ( <button onClick={() => setSelectedData(item)}>SHOW</button> {selectedData === item ? ( <p>{selectedData.chair.description}</p> ) : null}Desafortunadamente, tengo este error en los datos seleccionados:
Esta condición siempre devolverá 'falso' ya que los tipos 'any[]' y 'CartItemType' no se superponen.
Realmente no sé qué significa eso y cómo solucionarlo. 
Funcionaría solo cuando especificaría el número en una matriz de objetos como esta:
selectedData[0].name Pero tengo que hacer que funcione para selectedData.name
2 Respuestas
Responde la pregunta0
Debe ser consciente del valor que el estado va a tener. Es importante porque la actualización de estado hace que se vuelva a renderizar la aplicación.
Cambie su valor inicial de la variable de estado de datos selectedData a {} .
const [selectedData, setSelectedData] = React.useState({} as CartItemType); Motivo: Inicialmente, está manteniendo el valor de la matriz en un estado y luego está configurando el estado con objetos y realizó la operación asumiendo que es un objeto. Por lo tanto, es obvio que debe mantener el valor del objeto en el estado de selectedData .
Esta es la razón por la que recibe este mensaje de error.
This condition will always return 'false' since the types 'any[]' and 'CartItemType' have no overlap.Lo bueno: he hecho ese cambio en el sandbox y el error desaparece.
0
La respuesta aceptada solucionará el error, pero lo ideal es evitar la conversión de tipos.
En mi opinión, es más seguro establecer selectedData en null primero para asegurarse de que solo lo use si tiene un valor correcto:
const [selectedData, setSelectedData] = React.useState<CartItemType | null>(null);Entonces en tu código puedes hacer
if(selectedData) { ... }o
selectedData ? ... :