如何在 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;
  });