Tengo dificultades para descifrar los tipos al pasar la función de establecimiento de useState a un componente secundario.
He tratado de simplificar solo el código esencial a continuación:
padre
function Parent() { const [name, setName] = useState("Structured") .. return ( <> <Child setName={setName}/> </>niño
import { Dispatch, SetStateAction } from "react"; function Child(setName: Dispatch<SetStateAction<string>>){ return ( <> <Input onChange={ (value)=>{ setName(value: SetStateAction<string>) console.log(value) } </Input> </>En el padre recibo los siguientes errores:
Escriba "{ setName: Dispatch<SetStateAction>; }' no se puede asignar al tipo ' IntrinsicAttributes & Dispatch<SetStateAction' La propiedad 'setName' no existe en el tipo 'IntrinsicAttributes & Dispatch<SetStateAction>'.
En el niño que estoy recibiendo:
El argumento de tipo "cadena | cadena[]' no se puede asignar al parámetro de tipo 'SetStateAction' El tipo "cadena[]' no se puede asignar al tipo "SetStateAction'
Debiera ser
function Child({ setName } : { setName: Dispatch<SetStateAction<string>>}){ Child componente secundario acepta accesorios, que es un objeto, no solo el valor setName
Puede escribir su componente funcional React con la ayuda de FC de React, si desea un componente React completo. De lo contrario, por ejemplo, no puede acceder a children props de formularios secundarios, ya que no se conoce como un componente React.
Para la parte
onChange, estoy haciendo un reparto por ahora, ya que no sé cómo se ve estaInput. ¿Puedes mostrarlo?
import { Dispatch, SetStateAction, FC} from "react"; interface ChildPropsType { setName: Dispatch<SetStateAction<string>> } /* I'm using an interface for convenience, you can replace it with { setName: Dispatch<SetStateAction<string>> } */ const Child : FC<ChildPropsType> = ({setName}) => { return ( <> <Input onChange={ (value as string)=>{ setName(value); } </Input> </> ) } export default Child;