比较两个不同的数组并在 React 中使用 useState 更新对象数组

Question

所以我有一个名为 preferredMeetingDays 的数组：

const preferredMeetingDays = ["Mon", "Tue"];

我有一组天数，叫做 chosenDays:

const chosenDays = [
  {
    id: "Sun",
    dayValue: "Sun",
    chosen: false
  },
  {
    id: "Mon",
    dayValue: "Mon",
    chosen: false
  },
  {
    id: "Tue",
    dayValue: "Tue",
    chosen: false
  },
  {
    id: "Wed",
    dayValue: "Wed",
    chosen: false
  },
  {
    id: "Thu",
    dayValue: "Thu",
    chosen: false
  },
  {
    id: "Fri",
    dayValue: "Fri",
    chosen: false
  },
  {
    id: "Sat",
    dayValue: "Sat",
    chosen: false
  }
]

chosenDays 数组与 useState 一起使用，例如：

const [isChosenDays, setIsChosenDays] = useState(chosenDays);

我要做的是比较preferredMeetingDays数组和isChosenDays状态，如果isChosenDays 中的日期对象出现在 preferredMeetingDays 数组中。在这种情况下，这将是 "Mon" 和 "Tue"。新的 isChosenDays 状态将是：

[
  {
    id: "Sun",
    dayValue: "Sun",
    chosen: false
  },
  {
    id: "Mon",
    dayValue: "Mon",
    chosen: true
  },
  {
    id: "Tue",
    dayValue: "Tue",
    chosen: true
  },
  {
    id: "Wed",
    dayValue: "Wed",
    chosen: false
  },
  {
    id: "Thu",
    dayValue: "Thu",
    chosen: false
  },
  {
    id: "Fri",
    dayValue: "Fri",
    chosen: false
  },
  {
    id: "Sat",
    dayValue: "Sat",
    chosen: false
  }
]

我已经尝试过这段代码，但它无法正常工作并将 undefined 添加到数组中：

useEffect(() => {
    if(preferredMeetingDays.length > 0) {
      setIsChosenDays(isChosenDays => [
        ...isChosenDays,
        ...preferredMeetingDays.map((preferredDay) => {
          isChosenDays.map(chosenDay => {
            if(chosenDay.id === preferredDay) {
              return {
                ...chosenDay,
                chosen: true
              }
            }
            return chosenDay;
          })
        }),
      ])
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

如何让它工作？提前谢谢你。

Answer 1

useEffect(() => {
    setIsChosenDays(
      isChosenDays.map((day) => {
        if (preferredMeetingDays.some((pDay) => pDay === day.id)) {
          day.chosen = true;
          return day;
        } 
        return day;
        
      })
    );
  }, []);

here is a working example codesandbox

比较两个不同的数组并在 React 中使用 useState 更新对象数组

Compare Two different arrays and update array of objects with useState in React

arrays

object

reactjs

use-state