Solo estoy tratando de descubrir cómo usar prevState en el enlace useState con React typescript. El botón se asigna utilizando los datos de objectData.
Hasta ahora tengo:
let data = dataFromFile; const [chart, setChart] = React.useState<ChartInterface[]>(data);en el componente que estoy haciendo:
export interface ActiveObject { id: number; title: string; cb: (idx: number) => void; }; export interface ButtonGroupState { activeObject: ActiveObject | null; objects: ActiveObject[]; }; export interface ButtonGroupProps { data: Array<ActiveObject> } const ObjectData: ActiveObject[] = [ { id: 1, title: "1 way day", cb: () => { setChart(prevState => prevState.set(Data7Day)) } }, ];Pero eso realmente no funciona, ¿alguna idea? Obtengo que la propiedad 'set' no existe en el tipo 'ChartInterface[]'. Sé que tiene que ver con la interfaz, pero ¿es esa la forma de usar PrevState en useState y es necesario?
Según los documentos :
Si el nuevo estado se calcula utilizando el estado anterior, puede pasar una función a setState. La función recibirá el valor anterior y devolverá un valor actualizado. Aquí hay un ejemplo de un componente de contador que usa ambas formas de setState:
function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button> </> ); }Entonces, básicamente, lo que eso significa es que también puede pasar una función a la función de establecimiento devuelta por useState Hook .
Debe pasar el argumento como función, cuando necesite establecer el siguiente estado, en función del actual. Como señaló @RameshReddy, si la función cb solo debe cambiar la matriz del gráfico a una nueva matriz llamada Data7Day , no necesita usar una actualización de estado funcional, puede llamar directamente a setChart(Data7Day)
por ejemplo...
const [count, setCount] = useState(0);