如何在 React 中更新我的 state 数组而不更新 function

Question

I have a redux state array storeHoursCardRecord and state object storeDetails, I wanted to place the opening and closing time from storeDetails to storeHoursCardRecord's storeHoursTime array.

But on doing so I am using the push method and whenever the component renders the values gets populated again and again in my storeHoursCardRecord's storeHoursTime.

So is there any solution I can avoid it. My initial state of storeHoursCardRecord is:

storeHoursCardRecord: [
  {
    day: "MONDAY",
    storeHoursTime: [],
    fullDayOpen: false
  },
  {
    day: "TUESDAY",
    storeHoursTime: [],
    fullDayOpen: false
  },
  ...
]

props.storeHoursCardRecord.map(idx => {
  idx.storeHoursTime.push(                                 // push method 
    props.storeDetails.storeHoursMap[idx.day].openingTime,
    props.storeDetails.storeHoursMap[idx.day].closingTime
  );
  if (idx.storeHoursTime.join() === ["00:00", "23:59"].join()) {
    // eslint-disable-next-line no-param-reassign
    idx.fullDayOpen = true;                               // Can I avoid this assignment too.
  }
  return idx;
});

Answer 1

you can try

return [...idx,{props.storeDetails.storeHoursMap[idx.day].openingTime,
      props.storeDetails.storeHoursMap[idx.day].closingTime}]

Answer 2

You should create new objects in your map to avoid mutations:

props.storeHoursCardRecord.map(idx => {
  const { openingTime, closingTime } = props.storeDetails.storeHoursMap[idx.day];

  return {
    day: idx.day,
    storeHoursTime: [openingTime, closingTime],
    fullDayOpen: [openingTime, closingTime].join() === ["00:00", "23:59"].join(),
  };
});

Then you will have a pure map, satisfying eslint. But depending of the context, you will have to either store the result in a local variable:

function YourComponent(props) {
  const mappedStoreHoursCardRecord = props.storeHoursCardRecord.map(idx => {
    const { openingTime, closingTime } = props.storeDetails.storeHoursMap[idx.day];

    return {
      day: idx.day,
      storeHoursTime: [openingTime, closingTime],
      fullDayOpen: [openingTime, closingTime].join() === ["00:00", "23:59"].join(),
    };
  });

  // render mapped data here
  return mappedStoreHoursCardRecord.map(record => <Card data={record} />);
}

Or get the state update function from the props:

function YourComponent(props) {
  useEffect(() => {
    props.setStoreHoursCardRecord(
      props.storeHoursCardRecord.map(idx => {
        const { openingTime, closingTime } = props.storeDetails.storeHoursMap[idx.day];

      return {
        day: idx.day,
        storeHoursTime: [openingTime, closingTime],
        fullDayOpen: [openingTime, closingTime].join() === ["00:00", "23:59"].join(),
      };
    });
  }, []);

  return /* ... */;
}

function ParentComponent() {
  const [storeHoursCardRecord, setStoreHoursCardRecord] = useState(yourInitialState);

  return (
    <YourComponent
      storeHoursCardRecord={storeHoursCardRecord}
      setStoreHoursCardRecord={setStoreHoursCardRecord}
      /* other props */
    />
  );
}

Answer 3

create a copy using a spread operator

props.storeHoursCardRecord.map(idx => {

    const copy = {...idx}
    copy.storeHoursTime.push(                             
      props.storeDetails.storeHoursMap[idx.day].openingTime,
      props.storeDetails.storeHoursMap[idx.day].closingTime
    );
    if (copy.storeHoursTime.join() === ["00:00", "23:59"].join()) {
      // eslint-disable-next-line no-param-reassign
      copy.fullDayOpen = true;                              
    }
    return copy;
  });