如何在反应中的对象数组中设置对象数组的状态

Posted 2023-02-22

【中文标题】如何在反应中的对象数组中设置对象数组的状态

【英文标题】：How to set a state of an array of object inside an array of objects in react

【发布时间】：2019-01-10 09:20:07

【问题描述】：

我正在尝试在另一个对象数组中的一个对象数组中设置一个状态。我尝试了很多东西，但我找不到好的解决方案。

这是我的数组：

this.state = 
  Pages: [
    
      image: undefined,
      audio: undefined,
      audioName: undefined,
      subtitles: 'up',
      Langs: [
        
          lang: 'fr_FR',
          text: '',
        
      ]
    
  ]
;

我想修改 this.state.Pages[i].Langs[y].lang 或 .text 值。 有人有想法吗？

【问题讨论】：

你如何设置你的状态？在构造函数内部（或其他任何东西，当创建组件时）或像setState 之类的函数？请注意，setState 函数在一层嵌套对象上工作。

带有setState函数。那么如何在我的数组中直接设置一个对象Langs？

真的是这样吗？？只有一层嵌套

有点复杂。从 pages 数组中获取您需要修改的那个和它的索引。然后在Langs 数组中使用array.map()，并在该回调中使用条件逻辑返回相同的语言对象或具有新文本值的修改对象。最后添加创建一个新的 pages 数组，并使用您之前存储的索引将前一项替换为新的（使用 array.map 创建）。

【参考方案1】：

在这个嵌套级别我建议你使用immer 库：

import produce from "immer"

this.setState((oldState) => 
  return produce(oldState, draftState => 
    draftState.Pages.Langs.push( lang: 'it_IT', text: 'foo' )
  )
)

immer 的强大之处在于，您可以随意修改草稿，而无需触及旧状态。

【参考方案2】：

您可以创建Pages 和Pages[i].Langs 数组的副本，并创建Pages[i].Langs[y] 对象的副本并覆盖lang 或text 属性。

示例

changeText = (i, y, text) => 
  this.setState(previousState => 
    const Pages = [...previousState.Pages];
    const Langs = [...Pages[i].Langs];

    Langs[y] =  ...Langs[y], text ;
    Pages[i] =  ...Pages[i], Langs ;

    return  Pages ;
  );
;

【讨论】：

@Tholle 是不是 setState 对多个嵌套对象不起作用？

@ShubhamAgarwalBhewanewala 它可以工作，但状态越嵌套，就越难正确。