Sé cómo usar prevState en New State, quiero saber cómo funciona realmente. ¿Cómo funciona esta funcionalidad? ¿Por qué al poner 'prevValue' en la función 'setFullName' cambia su valor?
import React, { useState } from "react"; function App() { const [fullName, setFullName] = useState({ firstName: "", lastName: "" }); function handleChange(event) { let value = event.target.value; let name = event.target.name; setFullName((prevValue) => { if (name === "fName") { return { firstName: value, lastName: prevValue.lastName }; } else if (name === "lName") { return { firstName: prevValue.firstName, lastName: value }; } }); } return ( <div className="container"> <h1> {fullName.firstName} {fullName.lastName} </h1> <form> <input onChange={handleChange} name="fName" placeholder="First Name" /> <input onChange={handleChange} name="lName" placeholder="Last Name" /> <button>Submit</button> </form> </div> ); } export default App;Cuando se crea un componente (con React.createElement , o con JSX como <App /> ), React verá cuántas veces se llama a useState en el cuerpo del componente y creará una asignación interna de índices de estado a valores de estado. Por ejemplo, con el siguiente componente:
const Comp = () => { const [v1, setV1] = useState('a'); const [v2, setV12] = useState('b'); return <div>Text</div>; };Cuando se le llame, React tendrá, internamente, algo como lo siguiente:
[ // array of all stateful values for this rendered component 'a', // corresponds to the stateful value of the first useState 'b', // corresponds to the stateful value of the second useState ] Estos valores de estado interno se cambian cuando se llama al setter de estado (por ejemplo, setV1 ), y luego, cuando el componente se vuelve a representar, useState devuelve los nuevos valores con estado (procedentes de React internals).
Cuando el establecedor de estado recibe una devolución de llamada, por ejemplo, con su
setFullName((prevValue) => { Todo lo que realmente se necesita para que esto funcione es que React pase el valor de estado correspondiente actual en las partes internas de React como prevValue .
Cuando se establece el estado, el valor correspondiente en las partes internas de React se actualiza, pero puede haber otro código síncrono que se ejecute antes de que el componente se vuelva a representar, y los nuevos valores (provenientes de las partes internas de React) se devuelven en las próximas invocaciones de useState . Es por eso que usar el formulario de devolución de llamada del setter de estado a veces da resultados diferentes: el argumento de devolución de llamada siempre proviene de las partes internas de React, pero el valor de estado devuelto por useState solo se refiere al estado en el momento en que se representó el componente .
Por ejemplo
const [count, setCount] = useState(0); const clickHandler = () => { setCount(count + 1); // sets the state in React's internals to 1 setCount(count + 1); // sets the state in React's internals to 1, not 2; // because `count` still refers to the initial value of 0 }; const [count, setCount] = useState(0); const clickHandler = () => { setCount(count + 1); // sets the state in React's internals to 1 setCount(prevCount => prevCount + 1); // sets the state in React's internals to 2 // because `prevCount` comes directly from React's internals }; Pero, para su código aquí, debido a que no se producen múltiples cambios de estado en el mismo renderizado, no es necesario usar el formulario de devolución de llamada; siéntase libre de usar el identificador de prevValue fullName una devolución de llamada.