Metody cyklu życia komponentu w React.js

Poniżej rozwiązanie do ćwiczenia:

https://pastebin.com/BtTwq70t

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      input: null,
      forwardValue: null
    }

    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ input: event.target.value });
  }

  handleClick() {
    this.setState({ forwardValue: this.state.input });
  }

  render() {
    return(
      

        
        Propagate to child
        {this.state.forwardValue && }
      
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fromParent: Number(props.value),
      current: Number(props.value),
    }

    this.handleIncrement = this.handleIncrement.bind(this);
    this.handleDecrement = this.handleDecrement.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.value != this.state.fromParent) {
      this.setState({
        fromParent: Number(nextProps.value),
        current: Number(nextProps.value),
      })
    }
  }

  handleIncrement() {
    this.setState({ current: this.state.current + 1 })
  }

  handleDecrement() {
    this.setState({ current: this.state.current - 1 })
  }

  render() {
    return(
      

        {this.state.current}
        +
        -
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

Cześć. Nie rozumiem za bardzo, dlaczego stosuje się constructor. Widziałem przykłady, gdzie ustawiano stan początkowy bez constructora. Od czego zależy jego użycie?

A sam kurs bardzo fajny:)

Cześć, czy mógłby ktoś wytłumaczyć czym jest subskrypcja w React? Może być na jakimś przykładzie. Z góry dzięki 🙂

Dlaczego w przykładzie z pokazywaniem daty w komponencie DateComponent w metodzie render() dla zmiennej dateStr sprawdzamy najpierw czy zmienna this.state.date istnieje? Przecież przy utworzeniu obiektu w konstruktorze zostaje ona zdefiniowana.

[…] Metody cyklu życia komponentu w React.js ·  28 May 2018 […]

Ktoś wie czemu w przykładzie musimy użyć tego bindowania ?
window.setInterval(this.updateDate.bind(this), 1000);

Michał,
Kawał dobrej roboty przy tworzeniu tego kursu – zaciekawiłeś mnie i lekcja po lekcji dotarłem do tego miejsca, a mam nadzieję przedostać się do samego końca.

Moja odrobiona praca domowa: https://codepen.io/anon/pen/gdZqdR

Moja wersja zadania z przykładu 🙂
https://jsbin.com/yaviqitute/edit?html,output

Starałem się napisać to samemu ale wspomagałem się podglądem kodu z przykładu co do użycia nowych funkcji 🙂

Mega Kurs ! 🙂

https://codepen.io/Rotarepmi/pen/vrNaEO

Moje podwójne rozwiązanie, także z użyciem getDerrivedStateFromProps 🙂

Chciałbym zapytać, kiedy używać wspomnianej w poprzednim wpisie updater function, a kiedy przekazywać do setState() obiekt z wartościami, które chcemy zaktualizować.
Do tej port zauważyłem trzy różne typy sytuacji:

1) Updater:
https://pastebin.com/GEBCsjmF

2) Updater:
https://pastebin.com/3MC9vATf
3) I tutaj mam problem, bo chciałbym wykorzystać event, analogicznie jak wyżej ale rzuca mi nulla:
https://pastebin.com/hqa3t2ax

PRAWIE się udało Mój kod:
class App extends React.Component {
constructor(props) {
super(props);
this.state = { input: 0, number: 0};
}
onInputChange(e) {
this.setState({input: Number(e.target.value)});
}
onButtonClick() {
this.setState({number: this.state.input});
}
render() {
return (

)
}
}
ReactDOM.render(, document.getElementById("app"));

Nie wiem tylko, dlaczego przy zmienianiu liczby w inpucie od razu zmienia mi liczbę w outpucie na taką, jak była ostawiona wcześniej…. :/

Poniżej moje rozwiązanie, korzystam z pluginu do babelu, który rozszerza właściwości klas, dlatego składnia może się różnić od składni podanej przez innych 🙂

import React from ‚react’;

class BtwComponentApp extends React.Component {

state = {
number: 0,
numberPassed: 0
};

onInputChange = (e) => {
const inputChangeVariable = parseInt(e.target.value);
this.setState({
number: inputChangeVariable
});
};

passParent = () => {
this.setState({
numberPassed: this.state.number
})
};

render() {
return (

);
}
}

class BtwChild extends React.Component {

state = {
childNum: 0
};

increaseNumber =() => {
this.setState((prevState) => ({
childNum: prevState.childNum+1
}))
};

componentDidUpdate() {
console.log(‚will’);
}

componentWillReceiveProps(nextProps) {
if(this.props.num !== nextProps.num) {
this.setState({
childNum: nextProps.num
})
}
}

render() {
return (

);
}
}

export {BtwComponentApp};

Poniżej moje rozwiązanie. Będę wdzięczna za wszelkie uwagi i wskazówki

class App extends React.Component {

constructor() {

super()

this.state = {

input: 0,

number: 0

}

}

sendToChild() {

this.setState({

number: this.state.input

})

}

onChangedInput(event) {

this.setState({

input: Number(event.target.value)

})

}

render() {

return (

)

}

}

class SmallCounter extends React.Component {

constructor() {

super()

this.state = {

counter: 0

}

}

componentWillReceiveProps(nextProps) {

this.setState({

counter: nextProps.counter,

})

}

increment() {

this.setState({

counter: this.state.counter + 1,

})

}

decrement() {

this.setState({

counter: this.state.counter – 1,

})

}

render() {

return (

)

}

}

Akurat robiłem ćwiczenie XD

Długo kminiłem, ale React Tutorial pomógł
https://reactjs.org/docs/lifting-state-up.html

https://pastebin.com/1ujwR51X

Rozwiązanie dla aktualnego ćwiczenia:

https://pastebin.com/1ujwR51X

Czy może mi ktoś wyjaśnić dlaczego to nie działa?: Chodzi o cudzyslowy oraz bind(this)

Propagate to child

{this.state.forwardValue && }

tylko to:

Propagate to child
{this.state.forwardValue && }

czy może mi ktoś wyjaśnić dlaczego to nie działa: ?

oczywiscie jest wyzej , testowalem przyklad z przykladow podanych przez uzytkownikow blogoa ponizej w kom.:

this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);

Propagate to child

{this.state.forwardValue && }

tylko to bez cudzyslowow i z bind.this? gubie sie jaka forma jest poprawna, bo przyklady podaja ludzie ze dziala a u mnie niestety

Propagate to child

{this.state.forwardValue && }

Cześć – po aktualizacji ćwiczeń fajnie było by wyjaśnić w kilku słowach o co chodzi z getDerivedStateFromProps i jaka jest różnica między nim a componentDidUpdate. Chwile mi zajęło, zanim zobaczyłem różnicę 🙂 Dodatkowo nie jestem pewny jednej rzeczy. Jeżeli komponent dziecka może mieć swój stan, którego inicjalna wartość jest ustawiana przez props i aktualizacja miała by się odbywać przez getDerivedStateFromProps jak rozróżnić że props się tak naprawdę zmienił jeżeli 2 razy z rzędu ustawiany jest ten sam props?

Przykład: https://stackblitz.com/edit/typeofweb-lesson10

Kliknięcie na guzik „set” zmienia prop dziecka, które dzięki getDerivedStateFromProps zmienia swój stan. Jednak gdy guzikami „+” i „-” zmienię stan dziecka i kliknę jeszcze raz „set” bez miany wartości inputa, oczekiwał bym, że stan dziecka się zaktualizuje, a nie dzieje się tak, bo defakto wartość prop.value się nie zmieniła.

Jak coś takiego ugrać?

Dobry kursik. Dobre zadanko . Wymyśliłem takie coś ;>
https://pastebin.com/Q9yMTmXp
Pozdro!

Z użyciem lifting state up:

class Parent extends React.Component {
constructor(props) {
super(props);

)
}
}


Czy mój komentarz został usunięty?

Jest problem z typem, gdy wpisuje liczbę do inputa to Child interpretuje tego propsa jako String’a i zamiast inkrementować konkatenuję.. Próbowałem PropTypes lecz CodePen chyba tego nie obsługuje, czy jest na to jakiś inny sposób?

Moje rozwiązanie:

class Parent extends React.Component {
constructor(props) {
super(props);
this.state = { value: 0,
showChild : true};
}

_onChange(e) {
this.setState({ value: e.target.value});
}

_toggleChild(){
this.setState(state => ({ showChild: !this.state.showChild}));
}

render() {
return (

);
}
}

class Child extends React.Component {
constructor(props) {
super(props);

this.state = {
value: this.props.value,
};
}

componentWillReceiveProps(nextProps){
this.setState(state => ({
value : nextProps.value,
}));
}

_incrementChild(){
this.setState(state => ({
value : this.state.value + 1,
}));
}

_decrementChild(){
this.setState(state => ({
value : this.state.value – 1,
}));
}

render() {
return

;
}
}

ReactDOM.render(, document.getElementById(„app”));

>
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {value: 0, forward: 0};
this.changeValue = this.changeValue.bind(this);
this.onButtonClicked = this.onButtonClicked.bind(this);
}

export default ParentComponent;


Do tej pory przykłady były dobrze opisane. Ten tutaj jest słaby i niewiele tłumaczy.

oki .. myślałem że rozumiem React do póki nie zacząłem komunikować ze sobą komponentów XD
… taki przypadek
-> componentDidMount – pobiera dane, ustawia state i dopiero render() wie wszystko żeby wysłać {…} do gdzie wykonywana jest metoda { setState } ..

.. koniec końców mogę wysłać dane tylko w render .. gdzie NIE mogę tego robić 🙁 ..
index.js:1 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
in TabContent (at MainMenuItem.js:34) .. no i jestem w kropce .. gdzie albo jak to robić?

W temacie Lifting State Up: czy dobrą praktyką jest przekazywanie do obiektów zagnieżdżonych scope’a parent’a np:

Powyższe rozwiązanie pozwala na bezpośredni dostęp do logiki parenta z child’a.

… po 10 latach siedzenia w ExtJS i budowaniu całkiem sporych rozwiązań jestem przyzwyczajony do swobodnego poruszania się po wszystkich instancjach obiektów. Tam naturalnym jest to, że parent posiada handler’y do wszystkich wszystkich obiektów zagnieżdżonych i w drugą stronę każdy child posiada wskaźnik na parent’a.

Jest tu ktoś jeszcze? Mam duży problem z 2 punktem i już sama nie wiem, gdzie szukać pomocy. Tutaj moje wypociny:

class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
input: null,
forwardValue: null
}
this.handleIncrement = this.handleIncrement.bind(this);
this.handleDecrement = this.handleDecrement.bind(this);
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
}

handleIncrement() {
this.setState({input: this.state.input + 1})
}

handleDecrement() {
this.setState({input: this.state.input – 1})
}

handleChange(event) {
this.setState({input: event.target.value});
}

handleClick() {
this.setState({forwardValue: this.state.input});
}

render() {
return (

Propagate to child
{this.state.forwardValue && }

);
}
}

class Child extends React.Component{
render() {
return (

{this.props.number}
+
–

)
}
}

Przesyłam moje rozwiązanie ćwiczenia i proszę.o konstruktywną krytykę.
https://pastebin.com/Rhcn4hH4