Estoy tratando de reescribir la aplicación CV React para que use Hooks. Tengo este código a continuación:
const App = () => { const [values, setValues] = useState({ name: "", email: "", phone: "", schoolName: "", studyTitle: "", completion: "", studyStartDate: "", studyEndDate: "", companyName: "", positionTitle: "", mainTasks: "", isFormSaved: false, btnText: "Save info" }); const handleButtonClick = () => { setValues({ isFormSaved: !values.isFormSaved }); if (!values.isFormSaved) { setValues({ btnText: "Edit info" }); } else { setValues({ btnText: "Save info" }); } }; const handleChange = (e) => { setValues({ ...values, [e.target.name]: e.target.value }); }; const overview = ( <section className="overview"> <Overview data={values} /> </section> ); const form = ( <section className="editInfo"> <GeneralInfo onChange={handleChange} disabled={values.isFormSaved} placeholder={values} /> <Experience onChange={handleChange} disabled={values.isFormSaved} placeholder={values} /> <Practice onChange={handleChange} disabled={values.isFormSaved} placeholder={values} /> </section> ); return ( <div className="app"> <h1>CV Application</h1> {values.isFormSaved ? overview : form} <button onClick={handleButtonClick}>{values.btnText}</button> </div> ); }; export default App;Tengo problemas con la representación de la página. El botón funciona pero el efecto deseado: la representación del sitio de vista previa no funciona. Sospecho que la falla radica en el código App.js anterior.
Gracias de antemano por cualquier ayuda.
Actualmente está sobrescribiendo todos los valores al cambiar el texto del botón. Probablemente solo esté traduciendo el código de su componente de reacción a ganchos demasiado literalmente. useEffect no funciona exactamente igual que setState , siempre escribe el valor completo, porque está diseñado para variables de estado, no para todo el estado.
Sin embargo, es fácil de arreglar:
if (!values.isFormSaved) { setValues(values => ({ ...values, btnText: "Edit info" })); } else { setValues(values => ({ ...values, btnText: "Save info" })); }