Javascript 向功能组件添加状态和生命周期方法

如何在功能组件中重写此代码

我想向功能组件添加状态和生命周期方法

这是用于

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
            }))
        }
    }

class TherapistProfiles扩展React.Component{
状态={
页码：1，
治疗师：[]，
哈斯莫尔：没错，
结果标题：“顶级治疗师档案”，
页面加载：false
}
topProfilesUrl=‘治疗师/top/profiles’
searchByNameUrl='治疗师/search/name'
componentDidMount=（）=>{
这是一位治疗学家
滚动到（0，0）；
}
组件将接收道具=（新道具）=>{
设apiData=newProps.apiData；
if（apidat.topProfiles&&apidat.topProfiles.success）{
让治疗师=apiData.topProfiles.therapists
让hasMore=true
if（治疗师，长度<10）{
hasMore=假
}
此.setState（（）=>({
治疗师：这个。州。治疗师。康卡特（治疗师），
哈斯莫尔：哈斯莫尔，
页面加载：false
}))
}else if（apiData.therapistsByName&&apiData.therapistsByName.success）{
让治疗师=apiData.therapistsByName.therapists，
resTitle=治疗师。长度？
`“${this.state.searchName}”的结果`
：`看起来“${this.state.searchName}”没有结果`
此.setState（（）=>({
治疗师：治疗师，
哈斯莫尔：错，
页面加载：false，
结果标题：resTitle
}))
}
}

函数组件中没有您正在寻找的

componentDidMount

或

componentWillReceiveProps

类似于基于类的组件。相反，您可以使用

useffect

hook。请阅读文档：

如果您熟悉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>;
}

const Home=（）=>{
//界定国家
const[page，setPage]=useState（1）；
//实施以下副作用
//类似于类组件中的生命周期事件
useffect（（）=>{
log（'您的组件已准备好获取数据'）；
//也许您想在这里从API获取数据
}, []);
返回Hello函数组件；
}

建议改为：

---

我希望这会有所帮助！

您可以使用useState钩子作为组件状态，并使用Effect钩子替换ComponentDidUpdate和ComponentWillReceiveProps

首先，使用

useState

钩子来维护组件状态

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

接下来，要替换

ComponentDidMount

，将依赖项数组设置为空数组，以便

useffect

钩子在init上运行一次：

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

至于

component将接收props

，您将有另一个

useffect

hook与

props

作为依赖项数组的一部分，这样它将在更新

props

时运行。我不会编写完整的代码，因为它太长，但这里有一个起点：

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

---

我认为问题在于OP希望我们为他们做所有的工作，并将他们基于类的组件转换为函数组件。@zero298我想通过我提供的示例，我正在帮助OP有一个好的开始，跳转到

useffect

hook的使用，当然它需要像往常一样进一步的实现和阅读他有一个好主意。