Question

我正在使用map从渲染中的对象数组中获取ID。

我的代码：

class AppliedCandidates extends Component {

  render() {
    const {
      appliedjobs
    } = this.props
    const {
      joblists
    } = this.props {
      joblists && joblists.map(joblist => {
        this.props.getAppliedJobs(joblist.id)
      })
    }
    return ( <
      div > {
        appliedjobs && appliedjobs.map(appliedjob => {
          return <ol >
            <
            li > {
              appliedjob.jobid
            } < /li> <
            li > {
              appliedjob.candidatephoneno
            } < /li> <
            /ol>
        })
      } <
      /div> 
    );
  }
}

const mapStateToProps = (state) => {
  console.log("state", state);
  return {
    joblists: state.getJobs.job,
    appliedjobs: state.getAppliedJobs.appliedjob
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    getAppliedJobs: (joblists) => dispatch(getAppliedJobs(joblists))
  }
}

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

以及在Redux action.js中的以下代码中，如果我取消注释数组变量“ appliedjobs”，则过程将陷入无限循环。如果我注释掉，我只会得到最后一个值。

var appliedjobs = []

const getAppliedJobs = (joblists) => {
  return (dispatch, getState, {
    getFirebase,
    getFirestore
  }) => {
    const firestore = getFirestore();
    firestore.collection('Jobs').doc(joblists).collection('AppliedJobs').where("jobid", "==", joblists)
      .get()
      .then((querySnapshot) => {
        if (querySnapshot.empty === true) {
          dispatch({
            type: 'GET_APPLIED_JOB_ERROR',
            joblists
          });

        } else {
          //appliedjobs =[] 
          querySnapshot.forEach(function(doc3) {
            appliedjobs.push({
              candidatephoneno: doc3.data().candidatephoneno,
              jobid: doc3.data().jobid,
            });
          });
          dispatch({
            type: 'GET_APPLIED_JOB',
            payload: appliedjobs
          });
        }
      })
  }
};

如何获取值？

Answer 1

您不应在render函数中调度动作。如果您需要通过向存储库分派操作来填充数据，则应使用生命周期方法进行处理，在这种情况下，我认为componentDidUpdate最合适。来自Facebook的documentation：

componentDidUpdate（）在更新发生后立即被调用。初始渲染未调用此方法。

使用此机会在组件更新后在DOM上进行操作。只要您将当前的道具与以前的道具进行比较，这也是一个进行网络请求的好地方（例如，如果道具未更改，则可能不需要网络请求）。

Answer 2

正如Dor Shinar所说，不要在render函数上调用动作。为什么？因为渲染函数将在每次更新任何道具/状态时被调用。因此，如果您在此处调用该操作，则将继续重新渲染页面，因为您将不断从调度的操作中获取新的更新道具。

我不确定您的操作，因为我从不使用firebase。但是我想这是一些查询调用。

class AppliedCandidates extends Component {
componentDidMount() {
  // here, the joblists props will get automatically updates from the dispatched redux action, dont mutate/change the props by yourself, change it via action.

  const { getAppliedJobs, joblists } = this.props;
  getAppliedJobs(joblists); // to be honest, why your action have the input of array and you put up id of individual array item? So I just put the entire joblists as the function parameter.

}

render() {
  const { appliedjobs } = this.props;

  if (appliedjobs.length === 0) {
    return null;
  }

  return ( // you can add more
    <ol>
      {appliedjobs.map(appliedjob => <li>{appliedjob.id}</li>)}
    </ol>
  )
}

const mapStateToProps = (state) => {
  return {
    joblists: state.getJobs.job,
    appliedjobs: state.getAppliedJobs.appliedjob
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getAppliedJobs : (joblists) => dispatch(getAppliedJobs(joblists))
  }
}

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

这是将状态传递给Redux动作的正确方法吗？

2 个答案: