useEffect не устанавливает данные для состояния в функциональном компоненте

Question

У меня есть функциональный компонент, обернутый HOC. Он возвращает некоторые реквизиты после вызова API. Как мне установить состояние в моем дочернем компоненте (функциональном).

const withEditHoc = (WrappedComponent, actioneffects) => {
  class HOC extends Component {
    constructor(props) {
      super(props);
      this.state = {
        loading: true,
      };
    }
    executeAllActions = async (data, id) => {
      await Promise.all(data.map(act => this.props.dispatch(act(id)))).then(() =>
        this.setState({ loading: false }),
      );
    };
    componentDidMount = () => {
      const editpageId = this.props.match.params.id;
      this.executeAllActions(actioneffects, editpageId);
    };
    render() {
      console.log(this.state.loading);
      return (
        <React.Fragment>
          <Loading loading={this.state.loading}>
            <WrappedComponent {...this.props} />
          </Loading>
        </React.Fragment>
      );
    }
  }
  return HOC;

Это моя структура HOC. После вызова api данные будут сокращены. Я получаю опору для своего функционального компонента с помощью mapToStateProp.(Реакция версии 16.3) Пожалуйста, сделайте любое предложение по этому поводу.

Функциональная составляющая

function ProjectDetails(props) {
  const [projectValue, setValue] = useState({});
  const [proData, setProData] = useState({ ...props.project });

  useEffect(() => {
    setProData({ props.project });//Here I need to set my data, Iam not able to set data here.

  }, []);

  return <div>{JSON.stringify(props.project)}</div>;
}
function mapStateToProps(state) {
  return {
    project: state.projects.project,
  };
}



const projectDetailsWithHocLoading = withEditHoc(ProjectDetails, [actions.apiCall()]);
export default connect(mapStateToProps, null)(projectDetailsWithHocLoading);

Я новичок в реакции. Пожалуйста, предложите хороший способ

Answer 1

Map StateToProps создан для компонентов класса. поскольку вы используете хуки, вы должны использовать хук useSelector

---

   import { useSelector } from 'react-redux';

   function ProjectDetails(props) {
     const [projectValue, setValue] = useState({});
     const proData = useSelector(state => state.projects.project)

     return <div>{JSON.stringify(proData)}</div>;
    }

  const projectDetailsWithHocLoading = withEditHoc(ProjectDetails,actions.apiCall()]);
  export default projectDetailsWithHocLoading;

---