React, nie działający useState(...) w wywołaniu useMemo(...)

0

Brak możliwości użycia useState(...) / niewidoczne działanie w samym obrębie tegoż hooka to bug? błąd w moim kodzie? czy zamierzone działanie?
U mnie po użyciu "setPropName", "propName" wewnątrz useMemo(...) ma cały czas wartość początkową

    useMemo(() => {
        if(props.processedMatchesInfo === null || props.processedMatchesInfo === null)
            return

        const _rawData = mapMatchesToChartLinePoints()

        // <---- rawData jest cały czas "null" (wartosc poczatkowa), natomiast "_rawData" ma "oczekiwana" wartosc 
        setRawData(_rawData) //map matches to chart line point
 
        //calc min & max domains
        const paddingY = 50
        const min = Math.min(...rawData.map(p => p.y)) - paddingY // <---- rawData jest cały czas "null" (wartosc poczatkowa)
        const max = Math.max(...rawData.map(p => p.y)) + paddingY
        setDomainMin(min)
        setDomainMax(max)

        //agrresive optimization of raw data for zoomed out chart 
        const optimizedData = normalizeByXAxis(rawData, 5 * 24, 10)

        //setup zoom chart
        setZoomLineChatrData(
            optimizedData            
        )

        setZoomLineTick(
            optimizedData.map(p => p.x)
        )

        setLeadboardBrush(getLeadboardBrush(props.leadboardId))

        // try {
        //     setPlots(createPlots())
        // } catch(err) {
        //     DefaultLogger.error(`Unable to create plots: ${err}`)
        // } finally {
        //     setPlotsOwner(props.playerId)
        // }
    }, [,props])

Mogę wrzucić kod całego komponentu, ale póki co to spaghetti

0

Brak możliwości użycia useState(...) /

gdzie próbujesz go użyć?

[,props]

gdyby to było [props, ], byłaby to jednoelementowa tablica zawierająca props, jednak ponieważ ten przecinek masz przed props jest to dwuelementowa(!) tablica:

const props = {};
console.log([,props]); // [ <1 empty item>, {} ]

więc możliwe, że tutaj ci się coś pochrzaniło.

0

@LukeJL: Fakt może trochę nie dokładnie to przedstawiłem:

Mniej więcej tak to wygląda:

   
export const Chart = (props: ChartProps) => {
   const [rawData, setRawData] = useState<ChartMatchData[]>(null)

  useMemo(() => {
      _temp = // {...} przetworz props["costam"]

     setRawData(_temp)

     przetworzKolejneCosTam(rawData) // <-- rawData jest caly czas "null" mimo wywolania "setRawData"
  }, [,props]
}
0

ale to logiczne, że jeśli rawData jest deklarowane jako const i jest przypisane do tego null, to ta zmienna już się nie zmieni w tym renderze komponentu (a raczej: w tym wywołaniu funkcji Chart. Tak działa JavaScript, że jak masz zmienne const to nie mogą być przypisane ponownie.

Co prawda jakbyś dał let to też by się nie zmieniło, bo React działa działa inaczej. Zmienna rawData nigdy się nie zmieni tak naprawdę i nie powinna. Sztuczka polega na tym, że React wywoła jeszcze raz funkcję Chart (jak dasz setRawData), więc wydaje ci się, że rawData się zmieni, a w rzeczywistości to kolejny render, kolejne wywołanie funkcji, więc jest to inna zmienna (coś jak światy alternatywne na filmach, niby tak samo, a jednak wszystko inne).

Ogólnie używając hooków trzeba zawsze mieć z tyłu głowy zasięg zmiennych, domknięcia (closures).

Natomiast pytanie - co chcesz osiągnąć tak naprawdę? Czy w ogóle musisz te dane trzymać jako stan używając useState?

1 użytkowników online, w tym zalogowanych: 0, gości: 1