0
555
VistasReactJS - ¿prevState en el nuevo enlace useState React?
Me gustan mucho los nuevos ganchos de React y los uso con frecuencia para un proyecto en el que estoy trabajando. Me encuentro con una situación en la que quiero usar prevState en el gancho useState , pero no estoy muy seguro de cómo hacerlo.
He intentado algo como esto, pero falla al compilar.
const [ someState, setSomeState ] = useState( new Map() ) setSomeState( prevState.someState.set( key, value ) )(por cierto, esto es para asignar una serie de casillas de verificación para realizar un seguimiento de las que están marcadas)
Estoy tratando de seguir este ejemplo aquí , pero sin usar la función setState .
¡Gracias por la ayuda!
3 Respuestas
Responde la pregunta0
Para los objetos, puede usar el operador de propagación para usar prevState dentro de su llamada setState .
const [object, setObject] = useState({ firstKey: '', secondKey: '', }); setObject((prevState) => ({ ...prevState, secondKey: 'value', })); // object = { // firstKey: '', // secondKey: 'value', // } El fragmento a continuación muestra un ejemplo del uso de prevState para establecer el estado de un objeto.
const {useState} = React; const Example = ({title}) => { const initialState = { firstKey: 'empty', secondKey: 'empty', thirdKey: 'not empty', } const [object, setObject] = useState(initialState); const withPrevState = () => { setObject((prevState) => ({ ...prevState, secondKey: 'not empty', })); } return ( <div> <h5>Updates Second key to 'not empty'</h5> <p>First key: {object.firstKey}</p> <p>Second key: {object.secondKey}</p> <p>Third key: {object.thirdKey}</p> <button onClick={withPrevState}> Update with prevState </button> <button onClick={() => {setObject({secondKey: 'not empty'})}}> Update without prevState </button> <button onClick={() => {setObject(initialState)}}> Reset </button> </div> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>0
Para usar Maps , deberá clonarlo antes de manipular los valores. De lo contrario, está mutando el Map original y React no maneja el state mutable.
const handleChange = useCallback(({ target: { name, checked } }) => { setCheckbox(prevState => { return new Map(prevState).set(name, checked); }); }, []);Ejemplo de trabajo actualizado :
0
El actualizador de state updater de useState proporciona un patrón de devolución de llamada que le devuelve el estado anterior que puede usar para actualizar el estado actual
const [ someState, setSomeState ] = useState( new Map() ) setSomeState(prevState => prevState.set( key, value ) )