Avhengigheter i useEffect i React
La oss nå endre fargen ved å klikke på en knapp.
Vi oppretter en state color for fargen,
og gir den en startverdi:
const [color, setColor] = useState('green');
Erstatt strengverdien med vår state
i useEffect og ikke glem å legge den til
i avhengighetslisten i hakeparentesene.
Nå vil effekten kjøre hver
gang state color endres:
function App() {
useEffect(() => {
document.body.style.backgroundColor = color;
}, [color]);
...
}
La oss nå legge til en knapp for å endre fargen i komponenten vår:
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>endre</button>
</div>
);
Legg også til en klikk-håndtererfunksjon, som endrer fargen vår til oransje:
function changeColor() {
setColor('orange');
}
Det er gitt en state med brukerens navn. Gjør slik at hver gang navnet endres, blir verdien av state lagret i nettleserens lokale lagring.
