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调用之后，数据将在redux中。我正在使用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

为类组件创建的

mapStateToProps。因为您使用的是钩子，所以应该使用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;

useEffect未将数据设置为在功能组件中声明

1 个答案: