简体   繁体   中英

React-Redux child props not updating with parent

Redux store changes are reflected in my parent/wrapper class, but the prop passed to the child is not updated.

I've tried mutating the store differently to try and coax redux updates but realized this isn't the issue because my parent component is getting the updated information just fine. I've also tried storing the data in the parent's state as I've read but I've had issues with the asynchronous hook calls.

Parent

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}
    />
  );
};

Child

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

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

All code for Report.js: https://gist.github.com/arranw/2bd90c4dd07ab65d1c914e2320791c58

I would like both components to reflect the updated store state, but the value only makes it to the parent and the child doesn't receive the new values through the prop.

So this wasn't actually a react or redux issue, but an issue with Formik.

Solution: enableReinitialize prop on my Formik component allowed the form state to update with it's props. Thanks everyone for your help.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM