根据数组值添加 object 的键和值

Question

我在这里做一个小项目，但我有一些难题要做。

所以我有一个 state 的反应值是这样的

const [dayValue, setDayValue] = useState({
    monday: false,
    tuesday: false,
    wednesday: false,
    thursday: false,
    friday: false,
    saturday: false,
    sunday: false,
  });

然后我有一个这样的数组

const arrayDays = ['monday', 'wednesday', 'saturday'];

我想要做的是使我的所有关键 object 值在arrayDays中具有相同的值以更改值变为true

我已经尝试了一些方法，其中之一是我像这样在 useEffect 上实现它

    for (const x=0; x<arrayDays.length; x++) {
      for (const key in dayValue) {
        if (key === arrayDays[x]) {
          setDayValue({
            ...dayValue,
            [key]: true,
          });
          break;
        }
      }
    }

但它不起作用，因为 setState 挂钩是异步的 function *CMIIW。 有谁知道热来解决这个难题？

Answer 1

使用功能更新参数设置 state：

setDayValue(dayValue => {
  const updated = {...dayValue};
  let needsUpdate = false;
  for (const day of arrayDays) {
    if (!(day in updated)) continue;
    updated[day] = true;
    needsUpdate = true;
  }
  return needsUpdate ? updated : dayValue;
});

Answer 2

var temp = {...dayValue};
arrayDays.forEach( day => {
    if (temp[day] !== undefined) temp[day] = true;
})
setDayValue(temp);

Answer 3

在反应中更新 state 时，请始终尝试使用不可变数据结构。 所以这就是我推荐的

const arr = ['monday', 'wednesday', 'saturday'];

const updateDayValue = (arr) => {
  const updated = {
    ...dayValue,
    ...arr.reduce((acc, cur) => {
      return {
        ...acc,
        [cur]: true
      }
    }, {})
  }
  setDayValue(updated)
}

Answer 4

我为此编写了一小段代码。 我本可以写一个班轮，但我选择将我的逻辑分成小块以便你理解

const updateState = () => {
    const stateClone = { ...dayValue };
    const keyValueMap = Object.keys(stateClone).map((key) => ({
      key,
      value: stateClone[key]
    }));
    const updatedState = keyValueMap.reduce(
      (acc, { key }) => ({ ...acc, [key]: arrayDays.includes(key) }),
      {}
    );
    setDayValue(updatedState);
  };

此外，如果您有任何困惑，您可以通过此沙箱链接go：https://codesandbox.io/s/falling-wood-gflskr?file=/src/App.js:350-699

Answer 5

arrayDays.map(i => {
  Object.keys(dayValue).map(n => {
    if(i === n){
      setDayValue(daysN => {
        let days = {...daysN}
        days[n] = true
        return days
      })
    }
  })
})