Mam ten komponent i następujący interfejs interfejsu IProps { data: Array } stała ...

0
mouchin777 27 czerwiec 2021, 16:18

4 odpowiedzi

Najlepsza odpowiedź

Dzieje się tak dlatego, że useEffect uruchomi się tylko raz, ponieważ nie ma zależności i tylko inicjujesz stan (możesz powiedzieć), dodając setData w useEffect z pustą tablicą.

Powinieneś albo dodać props.data w tablicy zależności useEffect, albo możesz bezpośrednio zainicjować dane za pomocą useState.

const [data, setData] = useState(props.data);

// OR 

useEffect(() => {
    setData(props.data)
}, [props.data]) 

O ostrzeżenie 2: Obliczasz wartość logiczną w tablicy zależności. Nie spowoduje to ponownego renderowania. Lepiej dodaj data w tablicy i wykonaj sprawdzenia wewnątrz funkcji podanej przez. useEffect


 useEffect(() => {
    const canvas: any = canvasRef.current;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    if (data && data.length != 0 {
      setCandleWidth(canvas.width / data.length)
    }
  }, [data])

1
Shreyas Jadhav 27 czerwiec 2021, 13:35

To powinno pomóc:

  1. Upuściłem pierwszy useEffect i przekazałem dane bezpośrednio do stanu.
  2. Edytowałem tablicę zależności wewnątrz drugiego useEffect.

const [data, setData] = useState(props.data);

useEffect(() => {
    const canvas: any = canvasRef.current;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    if (data) {
        setCandleWidth(canvas.width / data.length)
    }
}, [data])

Dygresja:

Często nie chcesz duplikować danych. props.data i data (zmienna stanu) przechowują te same dane. Jeśli zdecydujesz się to zrobić, upewnij się, że jest to świadoma decyzja.

2
Shravan Dhar 27 czerwiec 2021, 13:49

To naprawi oba ostrzeżenia bez żadnych zmian w zachowaniu

 useEffect(() => {
    setData(props.data)
    // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []) 



 useEffect(() => {
    const canvas: any = canvasRef.current;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    if (data) {
      setCandleWidth(canvas.width / data.length)
    }
 }, [data])
1
Maulik 27 czerwiec 2021, 13:40

Pierwszy useEffect jest w porządku. To tylko ostrzeżenie ESLint, TSLint - te lintery namiętnie nie lubią pustej tablicy zależności. Jeśli jesteś absolutnie pewien, że chcesz użyć pustej tablicy jako tablicy zależności (dzięki temu efekt będzie uruchamiany tylko raz przy początkowym montowaniu), możesz dodać ESLint wyłącz jako komentarz obok wiersza

Jeśli chodzi o drugi useEffect, używasz tablicy zależności trochę źle. Tablica zależności służy tylko do wyświetlania zależności - tj. tego, co React będzie monitorował pod kątem zmian; służy do wypisywania rzeczy i nie powinno zawierać logiki. Jeśli potrzebujesz logiki do renderowania warunkowego, możesz umieścić ją w efekcie, na przykład w odpowiedzi @Shreyasa Jadhava

useEffect(() => {
    const canvas: any = canvasRef.current;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    if (data && data.length != 0) {
      setCandleWidth(canvas.width / data.length)
    }
  }, [data])

Ta sekunda useEffect będzie teraz oznaczać, że ponownie uruchamia efekt za każdym razem, gdy data się zmieni, ale tylko setCandleWidth, jeśli data.length nie wynosi 0

0
Bao Huynh Lam 27 czerwiec 2021, 13:40