Wpis z mikrobloga

#pytanie #programowanie #react
Mam taki przykład i może ktoś mi wytłumaczy dlaczego tak się dzieje:

const Test = (props) => {
const [click, setClick] = React.useState(0);
React.useEffect(() => {
window.showCkicks = showCkicks;
return () => null;
}, [])


const showCkicks = () => {
return click;
}
return (

setClick(click + 1)}>Klik
Kliki: {click}



)
}
ReactDOM.render(
,
document.getElementById('root')
);
Eksportuje sobie funkcję z komponentu do window Po jej wywołaniu zawsze dostaje defaultowe state.
Dlaczego wywołanie funkcji z wewnątrz komponentu nie zwróci aktualnych klików?
  • 9
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

konto usunięte via Wykop Mobilny (Android)
  • 1
@LostHighway: nie dziala Ci bo w funkcji show click masz referncje do stanu kiedy wynosi 0. Jak klikasz to referencja stanu sie zmienia a Ty przekazales w funkcji referencje z wqrtoscia 0. Gdybys chcial miec ta sama referencje bys musial mutowac stan
Ewentualnie bys musial ta funkcje przydzielac z nowa referencja po kazdym rerenderze czyli po kazdej zmianie stanu.
Oczywiscie kazde z tych rozwiazan jest bezsensu
  • Odpowiedz
@damienvalentine: @BomBom: Window to tylko przykład reprezentujący problem zwracania zainicjowanego stanu komponentu przy operacjach z zewnątrz.
Działa to już dobrze o ile przejdziemy na komponenty klasowe:

export class Test extends React.Component
  • Odpowiedz
@LostHighway: bo useeffect wykonuje się tylko raz przypisując do window tamtą funkcje, która ma wartość click tylko w momencie przypisania, byś musiał w useffect mieć [click] by funkcja zwracała cały czas aktualną wartość. W klasowym nie ma tego problemu bo funkcja zwraca wartość z state do którego cały czas ma dostęp a nie zapamiętaną wartość
  • Odpowiedz