Question

我是react-redux的新手。现在我在做的是，

在此过程中，单击“登录”，然后单击“成功”，

history.push('/');

我正在此页面上重定向用户。

现在

import React from 'react';
import { fetchUserJd } from '../action/index';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import JobList from '../../JobList/container/JobList';

class LandingPage extends React.Component {

  componentDidMount() {
    this.props.fetchJobDescription();
  }

  render() {
    if (this.props.jobs && this.props.jobs.content && this.props.jobs.content.length > 0) {
      return <JobList />;
    }
    else {
      return <Redirect to="/create-job" />
    }
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchJobDescription: () => dispatch(fetchUserJd())
  }
}

const mapStateToProps = (state) => {
  return {
    jobs: state.UserJobs.response
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(LandingPage);

这是我的目标网页。

现在，在这里我要做的是在componentDidMount中调用一个api并获取一些数据。如果有大量数据，那么我会将用户重定向到其他页面或差异路由。

const initialState = {
    response: [],
    error: false
}

    case FETCHING_JOBDESCRIPTION_SUCCESS:
                return {
                    ...state,
                    response: action.data,
                    error: false,
                }

这是我的化简器，我将初始状态用作空数组。

现在，这里发生了什么，它将直接转到else create-job的条件，但是数据可用，因此它应该已经呈现了该组件。但是，不知何故没有发生。

响应就像=>

{
    "content": [{
        "id": "5b7d4a566c5fd00507501051",
        "hrmsJdId": null,
        "companyId": null,
        "jdName": "Senior/ Lead UI Developer",
        "jobDescription": null,
        }]


   }

render() {
    if (this.props.isFetching) {
        return null;
    }
    else if (this.props.jobs && this.props.jobs.content && this.props.jobs.content.length > 0) {
      return <JobList />;
    }
    else {
      return <Redirect to="/create-job" />
    }
  }
}

我使用的解决方案是这样的，

export function fetchUserJd() {
  return (dispatch) => {
    let url = FETCH_JD_ROOT_URL + page + "&" + size;
    dispatch({
      type: REQUEST_INITIATED
    })
    return get(url)
      .then((response) => {
        if (response.status === 200) {
          dispatch(
            {
              type: FETCHING_JOBDESCRIPTION_SUCCESS,
              data: response.payload
            }
          )
          dispatch({
            type: REQUEST_SUCCESSED
          })
        } else {
          dispatch({
            type: REQUEST_SUCCESSED
          })
        }
      })
  }
  return Promise.resolve();
};

因此，在这里我使用Promise.resolve现在在componentDidMount中，

在结构上，

 constructor(props) {
    super(props);
    this.state = {
      isloading: true
    }
  }

componentDidMount() {
    this.props.fetchJobDescription().then(() => {
      this.setState({
        isloading: false
      })
    });
  }

那么，有人可以帮我解决这个问题吗？

如何根据某些数据渲染路线

0 个答案: