[LostHighway]

#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?

[WypadlemZKajaka]

window.showCkicks = showCkicks;

@LostHighway: po co?

[LostHighway]

@WypadlemZKajaka: Nie takie było pytanie :)
Po to by mieć dostęp do komponentu z zewnątrz. Docelowo bedzie co CustomEvents

[Krall]

@LostHighway zrób akcje sobie jakąś a nie jakieś window xF

[BomBom]

@LostHighway: to window to ci tam bardzo potrzebne ( ͡° ͜ʖ ͡°)

[d.....e]

@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

[BomBom]

@LostHighway: Wyjeb sobie ten stan do komponentu wyżej tam wyświetlaj ilość klików czy co tam chcesz, i przekazuj stan niżej

[LostHighway]

@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 {

  constructor(props) {

    super(props);

    this.state = {

      click: 0

    }

  }

  componentDidMount() {

    window.showCkicks = this.showCkicks;

  }

  showCkicks = () => {

    return this.state.click;

  }

  render() {

    return (

         {

          this.setState(ps => {

            return {

              click: ps.click + 1

            }

          });

        }}>Klik



        Kliki: {this.state.click}

      

    )

  }

}

[PalaczTHC]

@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ść

[LostHighway]

No i właśnie chodziło :)