useEffect 후크가 null임

useEffect 후크가 null임

useEffect에 메소드를 발송하여 제품을 설정하려고 한다.그러나 주 정부는 여전히 무효라고 말하고 있다.

인덱스.포인트

import React, { useEffect, Fragment } from "react";
import { useSelector, useDispatch } from "react-redux";

import { fetchProductsData } from "../../store/products-actions";

import Promotion from "./components/Promotion";
import Products from "./components/Products";
import ToastUi from "../../shared/ui/ToastUi";

import { Container, Row, Col } from "react-bootstrap";

const Home = () => {
  const dispatch = useDispatch();

  // const products = useSelector((state) => state.products.products);
  const products = useSelector((state) => state.products.productsTest);
  const cartQuantity = useSelector((state) => state.cart.quantity);

  useEffect(() => {
    dispatch(fetchProductsData());
  }, [dispatch]);

  return (
    <Fragment>
      <ToastUi
        status="Sukses"
        title="Notifikasi"
        message={`(${cartQuantity}) produk baru berhasil di masukkan keranjang`}
      />
      <Container fluid="xl">
        <Row>
          <Col>
            <Promotion />
          </Col>
        </Row>
        <Row className="mt-3" md={3}>
          <Products products={products} />
        </Row>
      </Container>
    </Fragment>
  );
};

export default Home;

제품들은 사이클이 끝난 후에도 여전히 무효라고 말하는데, 분명히 그 상태를 바꾸려면 두 번째 사이클이 필요하다.어떻게 하면 한 사이클에 변화를 줄 수 있을지 모르겠어.useEffect를 부모에 넣어야 하는가?

이것을 추가하면 EDIT가 작동한다.

 {products !== null && <Products products={products} />}
 // {/* <Products products={products} /> */} // 

하지만, 왜 이런 일이 일어나는지에 대한 더 좋은 방법이나 설명이 있을까, 고마워.

편집

products-resident.js.

import { createSlice } from "@reduxjs/toolkit";

import {
  products,
  excel_products,
  product,
  filteredProducts,
  productsTest,
} from "../datafiles";

const initialProductsState = {
  products,
  excel_products,
  product,
  filteredProducts,
  productsTest,
};

const productsSlice = createSlice({
  name: "products",
  initialState: initialProductsState,
  reducers: {
    viewExcelProducts(state, action) {
      state.excel_products = action.payload;
    },
    uploadExcelProducts(state) {
      if (excel_products.length < 0) {
        console.log("error");
      } else {
        const newProducts = state.products.concat(state.excel_products);
        state.products = newProducts;
        state.excel_products = [];
      }
    },
    selectProduct(state, action) {
      const product = state.products.find((item) => item.id === action.payload);
      state.product = product;
    },
    filterProducts(state, action) {
      const filteredProducts = state.products.filter(
        (item) => item.type === action.payload
      );
      state.filteredProducts = filteredProducts;
    },
    setProducts(state, action) {
      state.productsTest = action.payload;
    },
  },
});

export const productsActions = productsSlice.actions;
export default productsSlice;

products-actions.js.

import { productsActions } from "./products-slice";

export const fetchProductsData = () => {
  return async (dispatch) => {
    const fetchData = async () => {
      const response = await fetch("http://localhost:5000/products");

      if (!response.ok) {
        throw new Error("Could not fetch data!");
      }
      const data = await response.json();

      return data;
    };
    try {
      const productsData = await fetchData();
      dispatch(productsActions.setProducts(productsData));
    } catch (err) {
      console.log("Error: " + err);
    }
  };
};

무슨 뜻이야?it needs second cycle to make that state changed?

fetchProductsData비동기 함수인 것 같아즉, 즉시 데이터를 수신하지 않고 일정 시간이 지나면(네트워크 연결 속도, 페이로드 크기 등에 따라 다름)그러므로 당신의 데이터가 늦게 도착해도 괜찮다.

비동기 데이터에 대한 일반적인 접근 방식은 유지isLoading당신 상태로그리고 다음과 같이 사용하십시오.

  const isLoading = useSelector((state) => state.products.isLoading);
  ...
  return (
    <Fragment>
      ...
      {isLoading && <Spinner />} // Some loading indicator
      {!isLoading && <Products products={products} />}
    </Fragment>
  );

이렇게 하면 사용자에게 일부 데이터가 가져오는 중임을 나타낼 수 있다.이것은 좋은 UX 접근법이다.

isLoading당신의 어딘가에 있어야 한다.fetchProductsData이와 같은 조치:

export const fetchProductsData = () => {
  return async (dispatch) => {
    ...
    try {
      dispatch(productsActions.setIsLoading(true));
      const productsData = await fetchData();
      dispatch(productsActions.setProducts(productsData));
    } catch (err) {
      console.log("Error: " + err);
    } finally {
      dispatch(productsActions.setIsLoading(false));
    }
  };
};

참조URL: https://stackoverflow.com/questions/68108438/state-is-null-after-useeffect-hooks