Question

Redux存储的更改反映在我的父/包装类中，但是传递给孩子的道具未更新。

我尝试了不同的方式对商店进行变异，以尝试哄骗Redux更新，但意识到这不是问题，因为我的父组件正在获取更新的信息。在阅读时，我还尝试将数据存储在父状态下，但是异步挂钩调用存在问题。

父母

const ReportWrapper = ({ report: { loading, report, error }, match, getReport, editReport, finalizeReport }) => {
  useEffect(() => {
    getReport(match.params.id);
  }, [getReport, match.params.id]);

  const [displayFollowup, toggleDisplayFollowup] = useState(false);

  // deal with invalid urls/report not found
  if (error && error.status === 404) return <Redirect to="/reports/404" />;
  // loading case
  if (loading || report === null) return <Spinner />;

  const meta = Object.assign({}, report.meta);
  const initialReport = Object.assign({}, report.initialReport);
  const followup = Object.assign({}, report.followup);

  const initialValues = {
    id: report._id,
    meta,
    initialReport,
    followup
  };
  // after adding a followup, it is properly presented in the initialvalues and followup variables here and matches the redux store
  return (
    <Report
      initialValues={initialValues}
      editreport={editReport}
      displayfollowup={displayFollowup}
      toggledisplayfollowup={toggleDisplayFollowup}
      finalizereport={finalizeReport}
    />
  );
};

孩子

const Report = ({ initialValues, editreport, finalizereport, history, displayfollowup, toggledisplayfollowup }) => {

.....
console.log(initialValues); <--- Doesn't reflect the new redux store state
.....
}

Report.js的所有代码：https://gist.github.com/arranw/2bd90c4dd07ab65d1c914e2320791c58

我希望这两个组件都能反映出更新后的商店状态，但该值仅将其传递给父项，而子项不会通过prop接收新值。

Answer 1

因此，这实际上不是React或redux问题，而是Formik的问题。

解决方案：我的Formik组件上的enableReinitialize道具允许表单状态使用其道具进行更新。谢谢大家的帮助。

React-Redux子道具未与父项更新

1 个答案: