功能組件中的構造函數（道具）反應

Question

我有這個：

    const AddMembershipPage = (props) => {
  const history = useHistory();


//   constructor(props) = {
//     let ssoDetails = props.blue
//     super(props);
//     var myCnum = ssoDetails.uid;
//     var empType = "part-time";
//     var email = ssoDetails.preferredIdentity;
//     var name = ssoDetails.preferredFirstName + " " + ssoDetails.preferredLastName;

//     this.state = {
//         cnum: myCnum,
//         empType: empType,
//         email: email,
//         name: name,
//         phone: "",
//         siteList: "",
//         status: ""
//     };
//   }
  

  const handleInputChange = (e) =>
    setFields((f) => ({ ...f, [e.target.name]: e.target.value }));

  const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.paper,
    },
  }));
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AdminNav />
      <div className="App">
      <form>
        <label>Enter your name:
            <input type="text" />
        </label>
    </form>
    </div>
    </div>
  );
}
const mapStateToProps = (state) => {
    return {
        siteTab: state.siteTab,
        blue: state.blue
    }
}

const mapDispatchToProps = (dispatch, props) => ({
    setNavTabValue: (value) => dispatch(setNavTabValue(value))
});

export default AddMembershipPage;

如您所見，我要做的是使用constructor(props) ，並將值設置為道具。 我打電話給他們：

const mapStateToProps = (state) => {
    return {
        siteTab: state.siteTab,
        blue: state.blue
    }
}

但是當我做constructor(props)時，它顯示一個錯誤：

constructor(props) {

Missing semicolon.

我不確定構造函數道具是否可以在功能組件中使用，因為我試圖做的是從 class 組件轉換它。我該如何解決這個問題，或者我可以做些什么不同的事情？

Answer 1

Function 組件沒有構造函數。 Instead of trying to use the connect HOC and save props into local state ( a React anti-pattern ), you can use the useSelector hook from react-redux and select the state you need and just declare the local variables from the state.

import { useDispatch, useSelector } from 'react-redux';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

const AddMembershipPage = (props) => {
  const dispatch = useDispatch();
  const history = useHistory();
  const classes = useStyles();

  const siteTab = useSelector(state => state.siteTab);
  const ssoDetails = useSelector(state => state.blue);

  ... use ssoDetails locally
  
  ... use dispatch(setNavTabValue(value)) for the action

  const handleInputChange = (e) =>
    setFields(fields => ({
      ...fields,
      [e.target.name]: e.target.value,
    }));

  return (
    <div className={classes.root}>
      <AdminNav />
      <div className="App">
        <form>
          <label>Enter your name:
            <input type="text" />
          </label>
        </form>
      </div>
    </div>
  );
};