componentDidMount를 사용으로 변환하는 중효과

componentDidMount를 사용으로 변환하는 중효과

리액션 훅을 배우고 기존 코드베이스를 훅으로 전환하려고 하는데 헷갈린다.내부 상태를 설정하는 것이 정상인가?useEffect내가 그렇게 한다면 두려운 무한순환을 일으킬까?

import React, { useState, useEffect } from 'react';
import App from 'next/app';
import Layout from './../components/Layout';

function MyApp({ Component, pageProps }) {
    const [ cart, setCart ] = useState([]);

    const addToCart = (product) => {
        setCart((prevCartState) => {
            return [ ...prevCartState, product ];
        });
        localStorage.setItem('cart', JSON.stringify(cart));
    };

    //mimicking componentDidMount to run some effect using useEffect
    //useEffect(() => setCount((currentCount) => currentCount + 1), []);
    useEffect(() => {
        const cartCache = JSON.parse(localStorage.getItem('cart'));
        //cart = cartCache; Good or bad?
        cartCache || setCart(() =>{

        });        
    }, []);
    return <Component {...pageProps} />;
}

원래 클래스 기반 구성 요소:

/*
export default class MyApp extends App {
  state = {
    cart: []
  }
  componentDidMount = () => {
    const cart = JSON.parse(localStorage.getItem('cart'));
    if (cart) {
      this.setState({
        cart
      });
    }
  };
  addToCart = (product) => {
    this.setState({
      cart: [...this.state.cart, product]
    });
    localStorage.setItem('cart', JSON.stringify(this.state.cart));
  }
  render() {
    const { Component, pageProps } = this.props
    return (
      <contextCart.Provider value={{ cart: this.state.cart, addToCart: this.addToCart }}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </contextCart.Provider>
    )
  }
}*/

내부 상태를 설정하는 것은 괜찮다.useEffect종속 배열 내에서 동일한 필드의 변경 내용을 듣지 않는 한.당신의 특별한 경우에 당신은 전화한다.useEffect한 번만(빈 종속성 어레이를 통과한 후)

useEffect(() => {
   const cartCache = JSON.parse(localStorage.getItem('cart'));
   if (cartCache) {
      setCart(cartCache);   
   }     
}, []);

그리고 두 번째를 더하는 것도 멋질 것이다.useEffect듣다cart변화하고 유지하다localStorage최신의

useEffect(() => {
   localStorage.setItem('cart', JSON.stringify(cart));
}, [cart]);

왜냐하면 동기식 호출이기 때문에 이 시나리오에서는 콜백 버전의 기능도 사용할 수 있다.useState초기 값을 설정하기 위해이렇게 하면 사용할 필요가 없다.useEffect보통 가능하다면 나는 내 기능적 부품에 새로운 부작용을 도입하는 것을 피하려고 노력한다.

대신 다음과 같이 시도하십시오.

const [ cart, setCart ] = useState(() => {
   const cartCache = JSON.parse(localStorage.getItem('cart'));

   if (cartCache) {
      return cartCache;
   }

   localStorage.setItem('cart', JSON.stringify([]));
   return [];
});

이렇게 하면cart요소가 누락됨localStorage코드가 디폴트로 그것을 만들 것이다.[]배열을 비우고 상태용으로 설정하십시오.다른 경우에는 저장소의 값을 설정할 수 있다.

참고:또한 나는 듣기라는 측면에서 친절한 사용자의 답변에 동의한다.cart지켜야 할 변경 사항.localStorage와 최신의.useEffect나의 제안은 단지 초기 상태를 위한 것이다.

참조URL: https://stackoverflow.com/questions/64402467/converting-componentdidmount-into-useeffect