Metody cyklu życia komponentu w React.js

[type-of-web-komentarze[bot]]

Metody cyklu życia komponentu w React.js

Przy okazji omawiania komponentów będących klasami w React.js, wspomniałem też o możliwości korzystania z metod cyklu życia (lifecycle methods). Chciałbym do tego tematu teraz powrócić. Pokażę jakie metody cyklu życia definiuje React.js, do czego one służą i kiedy mogą się przydać.

https://typeofweb.com/metody-cyklu-zycia-komponentu-react-js

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michał		2018-01-27 00:02

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')

);

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Bo chcemy ustawić state tylko jeśli props.value się zmieniło.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Agata		2019-01-04 11:27

Cześć,
Mam dwa pytanie dotyczące powyższego kodu.
Pierwsze dotyczy tego fragmentu z komponentu Child:

componentWillReceiveProps(nextProps) {
if (nextProps.value != this.state.fromParent) {

Co jest tu przekazywane jako 'nextProps'?

Drugie pytanie dotyczy tego fragmentu:
{this.state.forwardValue && }
Czym różni się zapis:
{}

Kurs świetny :)
Pozdrowienia,
Agata

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Jako nextProps są przekazywane nowe propsy. Pod this.props dostępne są stare, te przed zmianą.

Ale muszę zauważyć, że od React 16.3 nie jest zalecane używanie tej funkcji w ogóle — zaktualizuję ten wpis na dniach!

{this.state.forwardValue && } oznacza, że jeśli this.state.forwardValue nie będzie (a konkretnie to jeśli jest ono falsy value) to komponent child w ogóle nie zostanie wyrenderowany.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Patrycja Bąk		2019-11-07 05:18

Ten kod już nie działa, wywala masę błędów :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Patrycja Bąk		2019-11-07 05:21

Mały refaktor dla potomnych:
Niestety sama nie wpadłam na rozwiązanie ale przepisywanie kodu dla zrozumienia tez uczy :)
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')
);

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil		2018-02-13 02:01

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:)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-13 09:08

Jeśli używasz klas to zawsze ustawia się początkowy state w konstruktorze. Mogłeś widzieć taki zapis:

class Component extends React.Component {
  state = { … };
}

To jest składnia, która jeszcze nie jest częścią ECMAScript, jest tylko propozycją — ale działa z create-react-app (dzięki Babelowi). Oznacza to to samo co taki zapis:

class Component extends React.Component {
  constructor(props) {
    super(props);
    state = { … };
  }
}

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil		2018-02-13 16:10

No i wszystko jasne, dzięki:)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Mateusz		2018-02-23 13:00

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 :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-23 14:12

W samym React nie ma żadnych subskrypcji. Chodziło o jakieś inne biblioteki i czynności, np. połączenie z WebSockets albo pobranie danych z API, albo też subskrybowanie Observable… wszelkie tego typu rzeczy :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Wojciech Niedźwiedź		2018-03-02 15:43

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.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-02 15:54

Bez powodu, wydaje się to niepotrzebne :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	crisu		2019-01-04 11:27

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Bez tego zmieniłby się kontekt w funkcji updateDate. Tutaj Wojtek dobrze to wyjaśnia: https://typeofweb.com/2017/11/14/this-js-kontekst-wywolania-funkcji/

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Damian B		2019-01-04 11:27

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil Mirosz		2019-01-04 11:27

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 ! :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rotarepmi		2019-01-04 11:27

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

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Bardzo ładnie ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Staśkiewicz		2019-01-04 11:27

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

W 2 i 3 przypadku możesz użyć po prostu obiektu. Funkcji używaj wtedy, gdy ustawiane dane zależą od aktualnie ustawionych w state.

event.target.value będący nullem nie ma związku ze sposobem ustawiania state.

Przy okazji: Metoda componentWillReceivProps jest deprecated i będzie usunięta z Reacta.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-02-01 13:20

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 (




Ustaw liczbę



);
}
}

class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
childNumber: Number(props.number)
};
}
componentWillReceiveProps(newProps){
this.setState({childNumber: newProps.parentNumber});
}
increase(){
this.setState({childNumber: this.state.childNumber + 1});
}
decrease(){
this.setState({childNumber: this.state.childNumber - 1});
}
render() {
return (

{this.state.childNumber}
Zwiększ
Zmniejsz

)
}
}
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.... :/

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-11 17:38

@łaśnie edytowałem ten artykuł — koniecznie zobacz pod koniec od "Aktualizacja 11.02.2019 r"!

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	greg		2019-02-05 14:16

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 (
      <div>
          <input type="text" onChange={this.onInputChange}/>
          <button onClick={this.passParent}>Pass Between!</button>
          <BtwChild num={this.state.numberPassed} />
      </div>
    );
}

}

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 (
        <div>
            <button onClick={this.increaseNumber}>Increase</button>
            <p>This is number from a props</p>
            <p>{this.props.numberPassed}</p>
            <p>This is number from local state!</p>
            <p>{this.state.childNum}</p>
        </div>
    );
}

}

export {BtwComponentApp};

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Agnieszka Sołtysik		2019-02-11 14:30

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 (

            <div>

                <input type="number" onChange={this.onChangedInput.bind(this)}/>

                <button onClick={this.sendToChild.bind(this)}>OK</button>

                <SmallCounter counter={this.state.number}/>

            </div>

        )

    }

}

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 (

            <div>

                <button onClick={this.increment.bind(this)}>+</button>

                <output>{this.state.counter}</output>

                <button onClick={this.decrement.bind(this)}>-</button>

            </div>

        )

    }

}

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-11 17:38

To co napisałaś wygląda jakby miało działać. Ale ja właśnie edytowałem ten artykuł — koniecznie zobacz pod koniec od "Aktualizacja 11.02.2019 r"!

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-11 21:42

Akurat robiłem ćwiczenie XD

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-12 18:16

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-13 02:13

https://pastebin.com/1ujwR51X

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-13 11:44

Rozwiązanie dla aktualnego ćwiczenia:

https://pastebin.com/1ujwR51X

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafal		2019-02-17 12:37

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

    <input onchange="{this.handleChange}" type="number"/>


    <button onclick="{this.handleClick}">Propagate to child</button>


    {this.state.forwardValue && <child value="{this.state.forwardValue}/">}

tylko to:

    <input onchange={ this.handleChange.bind(this) }  type="number"/>
    <button onclick={  this.handleClick.bind(this) } >Propagate to child</button>
    {this.state.forwardValue && <child value= {  this.state.forwardValue} />}

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafal		2019-02-17 12:43

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);

    <input onchange="{this.handleChange}" type="number"/>


    <button onclick="{this.handleClick}">Propagate to child</button>


    {this.state.forwardValue && <child value="{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

    <input onchange= { this.handleChange.bind(this)  } type="number"/>


    <button onclick= { this.handleClick.bind(this) }>Propagate to child</button>


    {this.state.forwardValue && <child value={ this.state.forwardValue } />}

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-17 23:30

Ale co dokładnie nie działa? Wrzuć cały przykład na codepen albo gdzieś :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Dragan		2019-04-26 10:17

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Dragan		2019-04-26 10:51

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html - to rozwiązało mój problem - ref lub key :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-04-26 21:17

Napisz do mnie na https://discord.typeofweb.com to Ci wszystko wyjaśnię :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Dragan		2019-05-04 19:46

Dzięki, ale wydaje mi się że już wiem o co chodzi :) Dokładniejsze przestudiowanie cyklu życia komponentu dużo wyjaśniło (świetny diagram - https://cdn-images-1.medium.com/max/2600/1*cEWErpe-oY-_S1dOaT1NtA.jpeg) . Wiem, że w zadaniu chodziło lifting state up, ale ciekawiło mnie dlaczego wycofali się ze starej metody :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-04-26 21:08

Co to jest getDerivedStateFromProps i jak go używać wyjaśniłem we wpisie, który jest podlinkowany tuż przed ćwiczeniem.

W ćwiczeniu chodzi o to, aby z tej metody nie korzystać. Zamiast tego, należy wynieść stan do rodzica, tak, jak napisałem w podpowiedzi do zadania.
Rozwiązanie z użyciem getDerivedStateFromProps będzie najprawdopodobniej przekombinowane i złe.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Slawko		2019-05-01 01:10

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Parysek		2019-08-05 14:10

Z użyciem lifting state up:

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

this.state = { number: 5 };
this.handleNumberChange = this.handleNumberChange.bind(this);

}

handleNumberChange(number) {
this.setState(() => {
return { number }
})
}

render() {
return (

);

}
}

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

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

}

handleChange(e) {
const { onNumberChange } = this.props;
onNumberChange(e.target.value);
}

render() {
const { number } = this.props;
return (
Lifting state up

)

}
}


 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Bartek		2019-09-19 17:53

Czy mój komentarz został usunięty?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Nie, po prostu leżał w spamie :(

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Bartek		2019-09-19 17:53

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 (

Value {this.state.value}
Click me!

    {this.state.showChild && <Child value={this.state.value}/> };
    
  </div>
);

}
}

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

{this.state.value}

+
-

;
}
}

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

To nie wina Reacta tylko DOM — value zawsze jest stringiem :) Musisz dokonać konwersji na liczbę, np:
value: Number(e.target.value)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Krzysztof Dziekiewicz		2019-12-17 14:56

>
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);
}

changeValue(event) {
    const value = event.target.value;
    this.setState(() => ({value:value}))
}

onButtonClicked() {
    this.setState(state => ({forward: state.value}));
}

render() {
    return (
        
            Input:  Forward value
            
            
        
    );
}

}

class ChildComponent extends React.Component {
constructor(props) {
super(props);
const value = Number(props.value);
this.state = {parent: value, value: value};
this.onButtonClicked = this.onButtonClicked.bind(this);

}

onButtonClicked(event) {
    const name = event.target.name;
    let value = 0

    if (name == "inc") {
        value = this.state.value + 1;
    } else if(name == "dec") {
        value = this.state.value - 1;
    }

    this.setState(() => ({value: value}))
}

static getDerivedStateFromProps(props, state) {
    const parentValue = props.value;
    return (parentValue == state.parent) ? null : {parent:parentValue, value: parentValue};
}

render() {
    return (
        
            Child:  {this.state.value} 
            +
            -
        
    )
}

}

export default ParentComponent;


 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michał Stachura	http://santri.eu/	2020-01-09 10:42

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-01-09 10:49

Mogę wyjaśnić, ale musiałbyś zadać jakieś pytanie :) Czego konkretnie nie rozumiesz?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michał Stachura	http://santri.eu/	2020-01-09 10:49

Porównując tą lekcję z poprzednimi i kolejnymi tutaj w przykładzie nie omawiacie nic :). Sama konstrukcja postu jest taka jakby ktoś nie miał na niego czasu.

Zupełnie inaczej to już wygląda w kolejnym wpisie nr 11 gdzie bardzo przystępnie krok po kroku omawiacie poszczególne komponenty. Sam kurs całościowo oceniam bardzo dobrze, ta jedna lekcja nr 10 moim zdaniem mogłaby być dokładniej opisana.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-01-16 20:11

Możesz złożyć reklamację i poprosić o zwrot pieniędzy, które zapłaciłeś za ten kurs. Oh, wait…

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-01-18 09:45

Chill, gościu, to był żart. Włożyłem dużo pracy w przygotowanie tego kursu i każdy odcinek jest dokładnie taki, jaki miał być. Twoja uwaga, że wygląda, jakby ktoś nie miał na niego czasu, jest, cóż, bardzo przykra i krzywdząca, a do tego mało merytoryczna, bo nie zaproponowałeś żadnych konkretów, co można by zmienić, tylko ogólnie Ci się nie podoba. Nic na to nie poradzę, co najwyżej jest mi trochę smutno.
Nie widzę pola do poprawy tego wpisu, bo jest taki, jak chciałem, żeby był, a jego przygotowanie zajęło wiele godzin. Zresztą większość z opisanych tutaj funkcji nie przyda Ci się zbyt często, więc możesz po prostu iść dalej.

Jeśli masz jakieś pytania, to chętnie na nie odpowiem, ale w sumie już to pisałem i pytań nie było, więc nie bardzo wiem, jak mógłbym Ci pomóc.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil		2020-03-06 16:36

Mi również ta lekcja przysporzyła trochę kłopotów, ale... nie mam Ci tego za złe, bo jak dla mnie i tak jest to za darmo :)

Powiem natomiast jak ja to widzę. Poprzednie lekcje były tworzone według schematu: przykład (np. fragment kodu) + opis do niego wraz z omówieniem teorii; przykład + opis; itd. Ta lekcja natomiast to dość dużo teorii (głównie funkcji), która opisana jak dla mnie jest dość nieprzystępnie (ale to może moja wina). Na końcu jest krótki przykład.

Ale... kluczowa informacja została zamieszczona i była o lifting state up i po przerobieniu przykładu https://pl.reactjs.org/docs/lifting-state-up.html, wszystko w ćwiczeniu stało się zrozumiałe. Zobaczę jak w przyszłości będzie mi się działało z pozostałymi metodami wymienionymi w tej lekcji.

W każdym bądź razie dzięki za to co robisz! :)

PS. W swoim wieloletnim doświadczeniu nauczyłem się jednej bardzo ważnej rzeczy. Analizuj feedbacki: konstruktywne przyjmij i podziękuj, niezrozumiałe - dopytaj i podziękuj, głupie/czepialskie - ewentualnie podziękuj, ale się nie przejmuj (i tak nic Ci to nie da).

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-03-06 17:20

Dzięki bardzo za konstruktywną krytykę :) Spróbuję poprawić ten wpis, albo na początku ostrzec, że będzie dużo suchej teorii!

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-04-08 10:18

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-04-08 11:17

Nie bardzo rozumiem problem, dane przesyłasz jako props, po co chcesz wywoływać setState w renderze?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-04-08 11:42

Comp1 wystamia metodę przez inną class statyczną Static.eventListener:
eventHandler = ( newState = {} ) => {
this.setState( newState );
}
(coś jak ma to miejsce w komunikacji parent-child)
i w
Comp2.render() {
Static.eventListener( { 'nowe dane' } ); // tu się pojawia problem
}

co ciekawe jak wprowadzę Comp2.render( Comp3 Static.eventListener( { 'nowe dane' } ); dam w componentDidMount() ) problemu już niema ... za to kółeczko się zamyka bo dane muszą być zmieniane więc w Comp3 trzeba przenieść Static.eventListener .. do metody która się 'odświeża', pytanie można użyć do tego shouldComponentUpdate ?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-04-08 12:44

Przykro mi, ale absolutnie niczego nie zrozumiałem.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Andrzej Sulej		2020-05-06 11:34

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.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-05-06 21:15

To bardzo zła praktyka.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Andrzej Sulej		2020-05-06 23:57

dzięki na info, tylko czy możesz to jakoś krótko rozwinąć - co jest dobrą praktyką ?
W jaki sposób obiekty mogą z sobą "gadać" w bardziej elastyczny sposób.
Zakładam, że podany przykład React'a z przekazywaniem metody to jeden z najprostrzych sposobów.
... zapewne znajdę odpowiedź w kolejnych częściach kursu ... :-)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-05-07 00:31

Tak!
https://typeofweb.com/komunikacja-pomiedzy-komponentami-w-react-js/

• redux później

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Andrzej Sulej		2020-05-07 00:38

dzięki - jest światełko w tunelu :-)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	xyz		2020-05-21 11:54

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}
            +
            -
        
    )
}

}

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz		2020-07-30 23:54

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

 
 

Komentarz zaimportowany z WordPressa