我如何在函数组件（粗箭头函数）中使用构造函数？

Question

我想使用粗箭头函数代替这个 class 组件。

class Categories extends Component{
    
    state = {
        category : []
    }
    constructor() {
        super();
        this.getCategories();
    }
    getCategories = async () => {
        let data = await api.get('/').then(({data})=>data);
        this.setState({category:data})
    }
render() {
        return(
-----
);
}
export default Categories;

如何在功能组件中使用它

Answer 1

在函数式组件中，您可以使用一个名为 useEffect 的钩子，这样您就可以在调用组件中实现类似于构造函数的东西

import React,{useEffect} from "react"

function App (){

useEffect(() => {console.log("useEffect")},[])

return <h1>Hello world</h1>
}

请注意，useEffect 函数还采用第二个参数（一个数组），它指示第一个参数（我们传递的函数）何时应该触发。当您传递一个空数组时，useEffect 中的函数仅运行第一次安装组件

您可以在 React 文档上阅读更多相关信息 https://reactjs.org/docs/hooks-effect.html

Answer 2

import React, { useCallback, useEffect, useState } from 'react';
import PropTypes from 'prop-types';

export const Categories = ({ propA, propB }) => {
  const [category, setCategory] = useState([]);

  const getCategories = useCallback(async () => {
    let res = await api.get('/').then(({data})=>data);
    setCategory(res);
  }, [setCategory]);

  useEffect(() => {
    getCategories();
  }, []);

  return (
    <>
      <h1>{propA}</h1>
      <h1>{prop2}</h1>
      <h1>{category}</h1>
    </>      
  );
};

Categories.propTypes = {
  propA: PropTypes.string.isRequired,
  propB: PropTypes.bool,
};

我如何在函数组件（粗箭头函数）中使用构造函数？

how can i use constructor in function component (fat arrow function)?

reactjs

react-hooks

react-functional-component

use-state