Estoy trabajando en una aplicación de reacción y necesito mantener una serie de nombres en mi estado global como en este archivo:
import React from "react"; import { useState } from "react"; const initialState = { nameList: [], test: 'hello' } export const Context = React.createContext() const Data = ({ children }) => { const [state, setState] = useState(initialState) return( <Context.Provider value={[state, setState]}> {children} </Context.Provider> ) } export default DataSin embargo, cuando trato de establecer "nameList" en un nuevo valor en este otro archivo:
const [state, setState] = useContext(Context); const [currName, setCurrName] = useState(''); const handleAddName = () => { setState.nameList(prevState => [...prevState, currName]) }Recibo el error "setState.nameList is not a funtion" y no puedo encontrar ni entender la razón por la cual, cualquier ayuda sería muy apreciada
Estás actualizando el estado incorrectamente, aquí tienes cómo hacerlo en tu caso:
const handleAddName = () => { setState(prevState => ({ ...prevState, nameList: [...prevState.nameList, currName] })) }Esto asegurará que el estado se actualice inmutablemente.
setState.nameList está mal porque setState es una función pero no un objeto que mágicamente tendrá las claves de su estado.