React - automatyczna zmiana stanu w class component.

Question

Witam ponownie i znów mam pytanie. :-)

Mam coś takiego (w uproszczeniu):

import React, { Component } from 'react'

class Main extends Component {

    constructor(props) {
        super(props)
    
        this.state = {

            value: 1,
            random: Math.floor(Math.random()*10)
        }
    }

clicker = () => { ...... }
    
    render() {

        const { value, random} = this.state

        return (
            <>
               <button onClick={this.clicker}> {value} <button/>
               <div> {random} <div/>
            </>
        )
    }
}

export default Main

Jak sprawić, by za każdym kliknięciem - czyli zmianą wartości {value} - automatycznie zmieniała się wartość random - na nową liczbę losową. Ale NIE ujmując tej zmiany w funkcji {clicker}.

Próbowałem różnych metod "life cycle" - ale wciąż uczę się ich użycia i jeszcze ich nie kumam :-))

Z góry dziękuję za cierpliwość, wyrozumiałość oraz pomoc.

Pozdrawiam wszystkich! :-))

Comments

Ale NIE ujmując tej zmiany w funkcji {clicker}.

Dlaczego nie w ten sposób? 

---

Myślisz, że jestem taki gupi?

Za bardzo obciążę buttona funkcjami i będzie mi się przegrzewał...

LOL

---

Myślisz, że jestem taki gupi? 

Zadałem proste pytanie, bo nie uzasadniłeś niechęci do aktualizacji zmiennej w click handlerze. Nie wiem dlaczego odebrałeś to jako atak osobisty. 

Za bardzo obciążę buttona funkcjami i będzie mi się przegrzewał...

Trollujesz teraz? Nie pokazałeś kodu tej funkcji, więc nie wiadomo co ona robi ani tym bardziej, czy ma problemy wydajnościowe. 

---

LOL - u mnie to oznacza uśmiech, nie szydzenie. Ale spokojnie, bez... złych emocji, ok?

Nie chciałem Cię urazić, ani nic takiego - więc może podziękuję za Twoją dociekliwość.

Dodatkowo opiszę co chcę osiągnąć:

Mam trzy pliki: Main.js, Button.js oraz Message.js

Main.js:

...
        this.state = {

            aVal: 1,
            bVal: 1,
            cVal: 1,

            ranA: Math.floor(Math.random()*10),
            ranB: Math.floor(Math.random()*10),
            ranC: Math.floor(Math.random()*10)
        }
...
clicker = () => {...}
...
return(
<>
   <div> 
     <Button aVal={value}  clicker={this.clicker} />
     <Message key="a" ranA={random}  /> 
  <div/>

   <div> 
     <Button bVal={value}  clicker={this.clicker}  />
     <Message key="b" ranB={random}  /> 
  <div/>

   <div> 
     <Button aVal={value} clicker={this.clicker} />
     <Message key="c" ranC={random}  /> 
  <div/>
</>
)

Button.js:

function Button(props) {

    const [value, setValue] = useState(props.value)

    const classHandler = () => {

        switch (true) {
            case value<2:
                return styles.red
                break;

            case value===2:
                return styles.normal
                break;

            case (value>2):
                return styles.green
                break;

        
            default:
                return styles.normal
                break;
        }
    }

    useEffect( () => {
        setValue(props.value)
    }, [props.value])

    return (
        <div>
            <button 
                className={`${classHandler()}`}
                onClick={() => {
                    props.clicker(props.keyWord)
                    setValue(value+1)
                }}                
            > {value} </button>
        </div>
    )
}

export default ButAgain

oraz Message.js

function Message(props) {

    const fatePack = {
        a: ['plusA', 'noneA', 'minusA'],
        b: ['plusB', 'noneB', 'minusB'],
        c: ['plusC', 'noneC', 'minusC']
    }
        
    const [random, setRandom] = useState(Math.floor(props.ran%3))
    const [temp, setTemp3] = useState(fatePack[`${props.keyWord}`][random])

    useEffect(() => {  
        
        setRandom(Math.floor(props.ran%3))
        
    }, [props.ran])


    return (
        <div>            
            tempC: {temp}            
        </div>
    )
}
export default Message

Zamysł jest taki,  by wraz ze zmianą wartości {value} zmieniała się {random} - i wyświetlała losową informację. Niestety nie działa - ale rano spróbuję się przez to przebić.

Pozdrawiam póki co i dziękuję za Twój czas :-)

---

LOL - u mnie to oznacza uśmiech, nie szydzenie. Ale spokojnie, bez... złych emocji, ok?

Nie chciałem Cię urazić, ani nic takiego - więc może podziękuję za Twoją dociekliwość. 

Na moje pytanie o odrzucenie pomysłu z użyciem funkcji clicker odpisałeś "Myślisz, że jestem taki gupi?". Odniosłem więc wrażenie, że to pytanie Cię obraziło, a nie taka była moja intencja. Po prostu chcąc aktualizować wartość przy kliknięciu w przycisk najprostszym sposobem wydaje się skorzystanie właśnie z click handlera, co z góry odrzuciłeś w opisie swojego problemu - dlatego dopytałem o powód.

Niestety nie działa - ale rano spróbuję się przez to przebić.

A czy to jest jakiś inny problem niż ten z pytania? Bo @Tnifey Ci odpowiedział, za co mu podziękowałeś i oznaczyłeś odp. jako najlepsza - czyli problem z zewnątrz wygląda na rozwiązany. :P

---

W oczy rzuciła mi się niespójność w odnoszeniu się do propsa. Do komponentu <Message /> przekazujesz odpowiednio: ranA, ranB i ranC

<Message key="a" ranA={random}  /> 

, ale wewnątrz tego komponentu w parametrze do useEffect odczytujesz props.ran. Analogiczny IMO błąd jest przy zapisach props.ran % 3, bo znów - nie ma w propsach ran, tylko są: ranA lub ranB lub ranC.

---

Błąd w pisowni - ale tutaj. U mnie nazewnictwo spójne. Przepraszam za zamęt, wczoraj już byłem zmęczony :-)
 

I nadal nie działa - mimo porannego wiadra kawy ;-)

Props.random się aktualizuje - ale już wyświetlanie { fatePack[`${props.keyWord}`][random] } - nie działa, tak jak należy.

Mam tak:

    useEffect(() => {  
        
        setRandom(Math.floor(props.random%3))
        setTemp(fatePack[`${props.keyWord}`][random])
        
    }, [props.random])

Gdzie zatem popełniam błąd? I na czym on polega - bardziej niż na samym rozwiązaniu, zależy mi na zrozumieniu... Pozdrawiam :-)

PS.

Po kolejnym łyku kawy zobaczyłem, że mam [props.random] - zamiast [props.random, random].

Teraz działa! LOL

Answer 1

dodaj componentDidUpdate i sprawdzaj, czy stan value jest różny niż poprzedni stan value, jeśli jest to zmień stan random 

componentDidUpdate(prevProps, prevState) {
    if(prevState.value !== this.state.value) {
        this.setState({ random: Math.floor(Math.random()*10) }};
    }
}

pamiętaj, że jeśli używasz this.setState() w componentDidUpdate powinien on być zamieszczony w warunku, bo zrobisz infinite loop ;P

Comments

Zrobiłem.

I to jeszcze jaaaaką 

Dziękuję, właśnie tego "drobiazgu" mi brakowało.

Pozdrawiam i dziękuję - gdyż działa tak, jakoby sam Jacek Sas.to pisał...