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

Question

I want to use fat arrow function instead of this class component.

in function component it gives error while defining constructor function and super() .

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;

how can i use this in function component

Answer 1

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,
};

Answer 2

In functional components you can use a hook which is called useEffect and with this you can implement something like constructors in call components

 import React,{useEffect} from "react" function App (){ useEffect(() => {console.log("useEffect")},[]) return <h1>Hello world</h1> }

note that useEffect function also takes second argument (an array) which indicates that when first arg (function that we passed) should fire. when you pass an empty array the function inside useEffect only run the first time components is mounted

you can read more about this on react docs https://reactjs.org/docs/hooks-effect.html