如何在 React 中更新我的 state 數組而不更新 function

Question

我有一個 redux state 數組 storeHoursCardRecord 和 state object storeDetails，我想將opening和closing時間從 storeDetails 放到 storeHoursCardRecord 的 storeHoursTime 數組中。

但是在這樣做時，我使用的是push方法，每當組件呈現值時，就會在我的 storeHoursCardRecord 的 storeHoursTime 中一次又一次地填充值。

那么有什么解決辦法可以避免嗎。 我的 storeHoursCardRecord 初始 state 是：

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

你可以試試

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

Answer 2

您應該在 map 中創建新對象以避免突變：

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(),
  };
});

那么你就會得到一個純map，滿足eslint。 但是根據上下文，您必須將結果存儲在局部變量中：

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

或者從道具中獲取 state 更新 function：

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

使用傳播運算符創建副本

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