Добавить методы состояния и жизненного цикла в Компоненты функций

Question

Как мне переписать этот код в функциональном компоненте?

Я хочу добавить в функциональный компонент методы состояния и жизненного цикла.

Это код для componentDidMount и componentWillReceiveProps из компонента класса.

class TherapistProfiles extends React.Component {

    state = {
        page: 1,
        therapists: [],
        hasMore: true,
        resultsTitle: 'Top Therapist Profiles',
        pageLoading: false
    }

    topProfilesUrl = 'therapists/top/profiles'
    searchByNameUrl = 'therapists/search/name'

    componentDidMount = () => {
        this.getTopTherapists()
        window.scrollTo(0, 0);
    }

    componentWillReceiveProps = (newProps) => {

        let apiData = newProps.apiData;

        if (apiData.topProfiles && apiData.topProfiles.success) {
            let therapists = apiData.topProfiles.therapists
            let hasMore = true

            if (therapists.length < 10) {
                hasMore = false
            }

            this.setState(() => ({
                therapists: this.state.therapists.concat(therapists),
                hasMore: hasMore,
                pageLoading: false
            }))

        } else if (apiData.therapistsByName && apiData.therapistsByName.success) {
            let therapists = apiData.therapistsByName.therapists,
                resTitle = therapists.length ?
                    `Results for "${this.state.searchName}"`
                    : `Looks like there are no results for "${this.state.searchName}"`

            this.setState(() => ({
                therapists: therapists,
                hasMore: false,
                pageLoading: false,
                resultsTitle: resTitle
            }))
        }
    }

Answer 1

Вы можете использовать ловушку useState для состояния компонента и ловушку Effect для замены ComponentDidUpdate и ComponentWillReceiveProps.

Сначала вы используете ловушку useState для поддержания состояния компонента.

const [ therapistProfilesState, setTherapistProfilesState ] = useState({
  page: 1,
  therapists: [],
  hasMore: true,
  resultsTitle: 'Top Therapist Profiles',
  pageLoading: false
});

Далее, чтобы заменить ComponentDidMount, вы устанавливаете массив зависимостей как пустой массив, так что хук useEffect будет запускаться один раз при инициализации:

useEffect(() => {
  getTopTherapists()
  window.scrollTo(0, 0);
}, []);

И как для ComponentWillReceiveProps у вас будет еще один useEffect хук с props как часть массива зависимостей, так что он будет работать при обновлении props. Я не буду писать полный код, поскольку он слишком длинный, но вот отправная точка:

useEffect(() => {
  if (something) {
    setTherapistProfilesState(...);
  }
}, [props]);

Answer 2

В компонентах функций нет таких вещей, как вы ищете componentDidMount или componentWillReceiveProps, как в компоненте на основе классов. Вместо этого вы можете использовать useEffect крючок. Прочитайте из документации:

Если вы знакомы с методами жизненного цикла класса React, вы можете думать о useEffect Hook как componentDidMount, componentDidUpdate и componentWillUnmount вместе взятых.

Позвольте привести простой пример:

const Home = () => {
   // defining states
   const [page, setPage] = useState(1);

   // implementing side effects below
   // similarly like lifecycle events in class component
   useEffect(() => {
      console.log('your component is ready to fetch data');

      // maybe you want to fetch data from an API here
   }, []);

   return <h1>Hello function component</h1>;
}

Рекомендуется прочитать: Использование крюка эффектов

Надеюсь, это поможет!