How to change props to state in React Hooks?

How to change props to state in React Hooks?

In Simple react class component we used to change the props to state this way:

constructor(props) {
    super(props)

    this.state = {
      pitch: props.booking.pitch,
      email: props.booking.email,
      firstName: props.booking.firstName,
      arrivalDate: props.booking.arrivalDate
    }
} 

But I am not aware of how to do it in new feature as Hooks, but I am trying to do it this way.

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(null)

useEffect(() => {
    setDescription(initialDesc)
  }, {})

 function handleChangeVariance(newVariance) {
    setDescription({
      ...description,
      template: {
        ...description.template,
        variance_name: newVariance,
      },
    })
  }

}

기본적으로 설명 소품만 바꾸면 됩니다. 설명 소품은 다른 부모 컴포넌트에서 가져와야 상태가 됩니다.PLS, Hooks 방식으로 새로운 방법으로 하는 방법을 가르쳐 주시겠습니까?

당신의 코드의 문제는{}. UseEffect 후크 기대 및 배열, 객체가 아닙니다.사용하다[initialDesc]대신.

소품이 변경될 때 구성요소 상태를 재설정하는 방법입니다.

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(null)

  useEffect(() => {
    setDescription(initialDesc)
  }, [initialDesc]);
}

이렇게 하면 컴포넌트 상태를 최초 렌더링 시에만 값이 제시되도록 초기화할 수 있습니다.

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(initialDesc);
}

첫 번째 인수로 초기 상태를 전달할 수 있습니다.useState다음과 같습니다.

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(initialDesc)

  ...

상태 초기값은 다음 주소로 전달된 값입니다.useState:

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(initialDesc)

매뉴얼에 기재되어 있는 바와 같이:

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

다음과 같습니까?

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

프로펠러 값에 의존하는 상태를 달성하는 동시에 불필요한 재렌더를 회피하는 것은 어렵다.

이러한 훅을 작성하기 위한 시도를 다음에 나타냅니다.

/**
 * Replacement for useState which depends on prop value and avoids unnecessary re-renders.
 */
export function useStateBasedOnProps(propValue) {
    const [, update] = useState(false);

    const [state, setState] = useMemo(() => {
        const state = {};
        return [
            state,
            (value) => {
                if (value instanceof Function) {
                    state.value = value(state.value);
                } else {
                    state.value = value;
                }
                update((tick) => !tick);
            }
        ];
    }, [update]);

    if (state.prevPropValue !== propValue) {
        state.prevPropValue = propValue;
        state.value = propValue;
    }

    return [state.value, setState];
}

Here is a usage example:

function IncButton({initialValue}) {
    const [value, setValue] = useStateBasedOnProps(initialValue);
    const increment = useCallback(() => setValue((prev) => prev + 1), [setValue]);
    return <button onClick={increment}>Click to increment: {value}</button>;
}

Full example: https://gist.github.com/mdevils/b861610780300784292194f65886517a

ReferenceURL : https://stackoverflow.com/questions/54130948/how-to-change-props-to-state-in-react-hooks