第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

React Hooks 更新嵌套數(shù)組

React Hooks 更新嵌套數(shù)組

四季花海 2022-12-29 15:23:32
我在使用 useState 掛鉤的狀態(tài)中有一個(gè)名為選項(xiàng)的對象數(shù)組我只想更新特定索引處的嵌套數(shù)組對象。var subOptionModel = {        text: "test",        price: 0,    };    var optionModel = {        optionSetId: 0,        optionName: "",        optionPrice: 0,        editOptionName: false,        subOptions: [subOptionModel],    };    const [options, setOptions] = useState([optionModel]);我在選項(xiàng)狀態(tài)中有多個(gè)選項(xiàng),我如何更新狀態(tài),如索引 2 處的選項(xiàng)和 1 處的子選項(xiàng),這就是我嘗試的目的。setOptions(                options.map((x, index) => {                    if (index !== optionIndex) return x;                    x.subOptions.map((subItem, subIndex) => {                        console.log(subItem);                        if (subIndex !== subOptionIndex) return subItem;                        return {                            ...subItem,                            text: text                        };                    });                }),            );
查看完整描述

3 回答

?
慕運(yùn)維8079593

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超5個(gè)贊

對于這種數(shù)據(jù)模型,我寧愿使用 useReducer 鉤子。就個(gè)人而言,我覺得它更干凈。


但是你的問題是,你沒有改變并返回你的 subOptions 。


setOptions(

  options.map((x, index) => {

      if (index !== optionIndex) return x;

      x.subOptions = x.subOptions.map((subItem, subIndex) => {

          console.log(subItem);

          if (subIndex !== subOptionIndex) return subItem;

          return {

              ...subItem,

              text: text

          };

      });


      return x;

  }),

);


查看完整回答
反對 回復(fù) 2022-12-29
?
拉丁的傳說

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊

我建議您使用不變性庫,例如immer.js。這將允許您精確地選擇要在您的州內(nèi)更新的內(nèi)容。


這將允許您像這樣修改您的選項(xiàng):


import produce from "immer"


const newOptions = produce(options, draftOptions => {

    draftOptions[2].subOption[1] = [whatever you want]

})


setOptions(newOptions)


查看完整回答
反對 回復(fù) 2022-12-29
?
楊__羊羊

TA貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊

按照您的解決方案,您錯(cuò)過了第一個(gè)返回mapif index === optionIndex。


setOptions((options) => {

  return options.map((x, index) => {

    if (index !== optionIndex) return x;

    return {

      ...x,

      subOptions: x.subOptions.map((subItem, subIndex) => {

        if (subIndex !== subOptionIndex) return subItem;

        return {

          ...subItem,

          text: text

        };

      })

    }

  })

})


否則你可以使用類似immer.js


查看完整回答
反對 回復(fù) 2022-12-29
  • 3 回答
  • 0 關(guān)注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號