Necesito usar esta función de reacción, pero en mecanografiado.
const ListItem = ({ text }) => { let [showMore, setShowMore] = useState(false); return ( <div className="item"> <div> <div className={`text ${showMore ? "active" : ""}`}>{text}</div> </div> <button onClick={() => setShowMore((s) => !s)}>Show more</button> </div> ); };He intentado algo como esto, pero recibo algunos errores.
<html>TS2345: Argument of type '(s: showContent) => boolean' is not assignable to parameter of type 'SetStateAction<showContent>'.<br/>Type '(s: showContent) => boolean' is not assignable to type '(prevState: showContent) => showContent'.<br/>Type 'boolean' is not assignable to type 'showContent'. interface showContent { state: boolean; } let [showMore, setShowMore] = React.useState<showContent>({ state: false }); return ( <div className="item"> <div> <div className={`text ${showMore ? "active" : ""}`}>{text}</div> </div> <button onClick={() => setShowMore((s) => !s)}>Show more</button> </div> ); Si su intención era convertir el primer bloque a mecanografiado, entonces no necesita la interfaz showContent ya que solo está proporcionando un valor booleano.
import React, { ReactNode, useState } from "react"; interface Props { text: ReactNode; } const ListItem = ({ text }: Props) => { let [showMore, setShowMore] = useState(false); return ( <div className="item"> <div> <div className={`text ${showMore ? "active" : ""}`}>{text}</div> </div> <button onClick={() => setShowMore((s) => !s)}>Show more</button> </div> ); };Ver este patio de juegos mecanografiado
El error que estabas recibiendo:
El argumento de tipo '(s: showContent) => boolean' no se puede asignar al parámetro de tipo 'SetStateAction'.
El tipo '(s: showContent) => boolean' no se puede asignar al tipo '(prevState: showContent) => showContent'.
El tipo 'booleano' no se puede asignar al tipo 'showContent'.(2345)
Está tratando de decirle que no puede asignar un boolean (es decir, true o false ) a un objeto con firma { state: boolean; } . Esta es la razón por la que @pilchard sugirió crear un objeto que coincida con su interfaz ( { state: !s.state } ).
Pero como muestra el código anterior, no creo que necesite este objeto en absoluto, parece un error de tipeo.