如何使用状态数组reactjs/react native更改嵌套对象中所有匹配属性的值

Question

这是我的 json 响应

const [shopRecord, setShopRecord] = useState({
  shopSetting: {
    shop_name: '',
    shop_address: '',
    shop_tel: '',
    shop_email: '',
  },
  menuCourse: [
    {
      name: 'Fish',
      items: [
        {
          id: '1',
          name: 'Fish & Chips Deal',
          is_selected: 1,
          modifiers: [
            {
              title: 'Select one option',
              options: [
                {
                  name: 'Medium Cod',
                  stockno: '102',
                  is_selected: 1,
                  price: 0,
                },
                {
                  name: 'Medium Haddock',
                  stockno: '103',
                  is_selected: 0,
                  price: 0,
                },
              ],
            },
            {
              title: 'Select one option',
              options: [
                {
                  name: 'Medium Chips',
                  stockno: '106',
                  is_selected: 1,
                  price: 0,
                },
                {
                  name: 'Large Chips',
                  stockno: '107',
                  is_selected: 0,
                  price: 60,
                },
              ],
            },
            {
              title: 'Select one option',
              options: [
                {
                  name: 'Salt',
                  stockno: '108',
                  is_selected: 1,
                  price: 0,
                },
              ],
            },
            {
              title: 'Select one option',
              options: [
                {
                  name: 'Mushy Peas',
                  stockno: '112',
                  is_selected: 0,
                  price: 0,
                },
                {
                  name: 'Curry Sauce',
                  stockno: '114',
                  is_selected: 1,
                  price: 0,
                },
              ],
            },
            {
              title: 'Select an option',
              options: [
                {
                  name: 'Rubicon Guava',
                  stockno: '119',
                  is_selected: 0,
                  price: 100,
                },
                {
                  name: 'Vimto',
                  stockno: '121',
                  is_selected: 1,
                  price: 100,
                },
              ],
            },
          ],
          price: 1080,
        },
      ],
    },
  ],
});

我正在尝试将所有匹配属性

"is_selected": 1

更改为

"is_selected": 0

我有一个 Flatlist 组件，它使用 shopRecord 显示菜单列表。 它有一个属性 menuCourse，它是一个对象数组，每个对象都有一个属性 items，它也是一个对象数组，它有一个属性 modifiers，它也是一个包含另一个属性 options 的数组也是一个对象数组。

用户单击任何选项后，我将 is_selected 属性更新为 1。到目前为止工作正常，一旦用户单击添加到购物车按钮，我只需将整个 items 对象传递到我的商店，并且我有一个功能可以从该对象中删除未选择的项目。

我想要做的是将所有 is_selected 属性更改回 0。

如何访问多层嵌套对象而不改变状态？

我正在这样做，但shopRecord的控制台显示该值未更改。

setShopRecord(prevState => {
  return {
    ...prevState,
    menuCourse: prevState.menuCourse.map(menuObj =>
      menuObj.items.length > 0
        ? {
            ...menuObj,
            items: menuObj.items.map(itemObj =>
              itemObj.modifiers > 0
                ? {
                    ...itemObj,
                    is_selected: 0,
                    modifiers: itemObj.modifiers.map(modifierObj =>
                      modifierObj.options > 0
                        ? {
                            ...modifierObj,
                            options: modifierObj.options.map(optionObj =>
                              optionObj.is_selected == 1
                                ? {...optionObj, is_selected: 0}
                                : optionObj,
                            ),
                          }
                        : modifierObj,
                    ),
                  }
                : {...itemObj, is_selected: 0},
            ),
          }
        : menuObj,
    ),
  };
});

不知道我做错了什么。

提前致谢。 :)

Answer 1

如

@michael Bahl

所述，缺少

.length

，其余代码是正确的。您在控制台中看不到更新值的原因是由于 React 中更新程序的概念。 React 不会立即更改状态值，所有状态设置器都会通过更新器来更新状态值。这样做是为了提高效率。 React 不是更新单个状态，而是一起更新多个状态。

让我们通过例子来理解这一点，

const [myState, setMyState] = useState(false);
console.log(myState);//false
setMyState(prevVal => {
   console.log(prevVal);//false
   const updatedVal = !prevVal;
   console.log(updatedVal);//true;
   return updatedVal;
);
console.log(myState);//false

在上面的代码中，您可以看到状态更新器的行为。

因此，对于您的代码，您可以使用以下代码检查该值是否正在更新。

setShopRecord(prevState => {
            const result = {
                ...prevState,
                menuCourse: prevState.menuCourse.map(menuObj =>
                    menuObj.items.length > 0
                        ? {
                            ...menuObj,
                            items: menuObj.items.map(itemObj =>
                                itemObj.modifiers.length > 0
                                    ? {
                                        ...itemObj,
                                        is_selected: 0,
                                        modifiers: itemObj.modifiers.map(modifierObj =>
                                            modifierObj.options.length > 0
                                                ? {
                                                    ...modifierObj,
                                                    options: modifierObj.options.map(optionObj =>
                                                        optionObj.is_selected == 1
                                                            ? { ...optionObj, is_selected: 0 }
                                                            : optionObj,
                                                    ),
                                                }
                                                : modifierObj,
                                        ),
                                    }
                                    : { ...itemObj, is_selected: 0 },
                            ),
                        }
                        : menuObj,
                ),
            };
            console.log(JSON.stringify(result));//here you will see updated value
            return result;
});

快乐编码:)