Aquí está el enlace CodeSandBox: https://codesandbox.io/s/stale-prop-one-g92sv?file=/src/App.js
Encuentro que los componentes secundarios no mostrarán los valores de contador correctos después de hacer clic en dos botones, aunque el contador en realidad se está incrementando:
import "./styles.css"; import { useState } from "react"; const MyComponent = ({ value }) => { const [counter] = useState(value); return <span>{counter}</span>; }; export default function App() { const [counter, setCounter] = useState(0); const isVisible = counter !== 1; console.log(counter); return ( <div className="App"> <div> <button onClick={() => setCounter((counter) => counter + 1)}> Click me </button> </div> {isVisible && ( <div> Message 1 is: <MyComponent value={counter} /> </div> )} <div style={isVisible ? { display: "block" } : { display: "none" }}> Message 2 is: <MyComponent value={counter} /> </div> </div> ); }Intento forzar la representación del componente secundario asignando un contador a su clave:
export default function App() { const [counter, setCounter] = useState(0); const isVisible = counter !== 1; console.log(counter); return ( <div className="App"> <div> <button onClick={() => setCounter((counter) => counter + 1)}> Click me </button> </div> {isVisible && ( <div> Message 1 is: <MyComponent key = {counter} value={counter} /> </div> )} <div style={isVisible ? { display: "block" } : { display: "none" }}> Message 2 is: <MyComponent key = {counter} value={counter} /> </div> </div> ); } Funciona, pero sigo sin saber por qué no funciona el anterior, ya que ha cambiado el props.value en MyComponent ... Gracias de antemano.
Con este:
const MyComponent = ({ value }) => { const [counter] = useState(value); return <span>{counter}</span>; }; Le está diciendo a React que establezca el estado inicial en el primer accesorio de value pasado al componente, en el montaje.
Cuando el componente se vuelve a renderizar, el componente ya se ha montado, por lo que se ignora el valor pasado a useState ; en su lugar, el counter en ese elemento secundario se toma del estado de MyComponent , que es igual al estado inicial en MyComponent , el valor inicial apoyo de value aprobado.
Para lo que está tratando de hacer, solo tiene un valor único en toda la aplicación aquí que desea usar en todas partes, por lo que solo debe tener una llamada useState , en el padre, y luego representar el contador en el hijo desde el prop , que cambiará con el estado padre.
const MyComponent = ({ value }) => { return <span>{value}</span>; };