React Redux应用程序显示带有先前数据的表单，直到重新加载页面

Question

我有以下代码，基本上我根据加载的提交（fetchRubricItemsWithScoresAssignedByStudent）从数据库（submissionId）中检索一些记录，并根据获取的值生成表单。

一切正常，除了一个小问题。例如，当我第一次访问提交内容时，一切都显示正常。但是，然后，当我访问另一个提交时，该表单最初会显示先前显示的提交中的数据，直到刷新页面为止（或返回并再次访问它）。我正在使用Redux，并确保将新数据正确加载到状态（props.rubricItemsWithScores）。

您在下面的代码中看到任何问题吗？

const AssessingWork = props => {
  const currentUserId = authenticationService.currentUserValue.data["id"];
  const submissionId = props.match.params.submissionId;

  useEffect(() => {
    //if (props.loading != true) {
    props.fetchRubricItemsWithScoresAssignedByStudent(
      submissionId,
      currentUserId
    );
    //}
  }, [submissionId]);

  if (props.loading) {
    return <div>Loading...</div>;
  }

  if (props.error) {
    return <div>{props.error}...</div>;
  }

  return (
    <>
      <InfoBarWorkBeingReviewed
        key={submissionId}
        submissionId={submissionId}
      />
      {props.rubricItemsWithScores && (
        <div className="p-3" key={submissionId}>
          {activeTaskService.currentTaskValue.didTaskStart == true &&
            activeTaskService.currentTaskValue.dueDatePassed == false && (
              <form key={submissionId}>
                <ul className="list-group mt-4">
                  {props.rubricItemsWithScores &&
                    Object.keys(props.rubricItemsWithScores).map(rItemId => {
                      const rubricItem = props.rubricItemsWithScores[rItemId];
                      //if (rubricItem.rubricId == props.assignments[props.submissions[submissionId].assignmentId].rubricId)
                      return (
                        <li className="list-group-item" key={rItemId}>
                          <div className="row">
                            <div className="col-auto mr-auto">
                              {rubricItem.title}
                            </div>
                            <div className="col-auto">
                              <select
                                onChange={SaveAssessment}
                                defaultValue={rubricItem.currentScore}
                                id={rItemId}
                                className="form-control"
                              >
                                <option>-Assess-</option>

                                <option key={0}>0</option>
                                <option key={1}>1</option>
                                <option key={2}>2</option>
                                <option key={3}>3</option>
                              </select>
                            </div>
                          </div>
                        </li>
                      );
                    })}
                </ul>
              </form>
            )}
        </div>
      )}
    </>
  );
};

const mapStateToProps = state => ({
  submissions: state.submissionReducer.submissions,
  rubricItemsWithScores: state.assessmentItemReducer.rubricItemsWithScores, //this is used to create the form with rubric items

  loading: state.assessmentReducer.loading,
  error: state.assessmentReducer.error
});

const mapDispatchToProps = dispatch => {
  return {
    fetchRubricItemsWithScoresAssignedByStudent: (submissionId, userId) =>
      dispatch(
        FetchRubricItemsWithScoresAssignedByStudent(submissionId, userId)
      )
  };
};

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