0
143
Vistasreaccionar: el valor de prop permanece sin cambios después de que los padres actualicen el estado correspondiente
Hay 2 componentes en mi aplicación, que son Button y Input 
Después de hacer clic en el botón Click to update state , el valor de la entrada con el valor May debe cambiarse a May New , pero encuentro que no sucede.
Cuando verifico el componente de entrada, useEffect no se activa.
function Input({ inputValue }) { // the useEffect does not fire useEffect(() => { console.log(inputValue); }, [inputValue]); ... } ¿Cómo puedo resolverlo?
Aplicación.js
import "./styles.css"; import React, { useState } from "react"; import Input from "./Input"; import Button from "./Button"; export default function App() { const [people, setPeople] = useState([ { id: 0, name: "May" }, { id: 1, name: "John" } ]); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> {people.map((pp) => { return <Input key={pp.id} inputValue={pp} />; })} <Button people={people} setPeople={setPeople} /> </div> ); }Botón.js
import React from "react"; function Button({ people, setPeople }) { return ( <button onClick={() => { let peopleTemp = people; peopleTemp[0]["name"] = "May New"; setPeople(people); }} > Click to update state </button> ); } export default Button;Entrada.js
import React, { useEffect } from "react"; function Input({ inputValue }) { useEffect(() => { console.log(inputValue); }, [inputValue]); return <input readOnly defaultValue={inputValue.name} />; } export default Input; codigosandbox
https://codesandbox.io/s/wizardly-liskov-k8kxin?file=/src/Button.js
3 Respuestas
Responde la pregunta0
Debe hacer lo que Gabriele sugirió para resolver el problema en la consola, pero podría ejecutar otro problema ya que defaultValue se usa para la inicialización y no cambiará incluso mutando el estado. Para evitar esto, puede establecer una clave en la entrada como: <input key={inputValue.name} readOnly defaultValue={inputValue.name} /> ;
0
Elimine el useEffect en el componente de entrada. Funcionará. no hay necesidad de usar useEffect.
0
Eso es porque estás mutando el estado.
usar
onClick = {() => { const updatedPeople = people.map((person, index) => { // here you check if the person is the one you want to update if (index === 0) { return { ...person, name: 'May New' }; } return person; }) setPeople(updatedPeople); } }