Question

我正在尝试在另一个对象数组内的一个对象数组内设置状态。我做了很多尝试，但找不到合适的解决方案。

这是我的数组：

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

我要修改this.state.Pages [i] .Langs [y] .lang或.text值。有些人有个主意吗？

Answer 1

您可以创建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 };
  });
};

Answer 2

在此嵌套级别，建议您使用immer库：

import produce from "immer"

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

沉浸的力量在于您可以根据需要修改草稿，而无需触及旧状态。

如何在React中的对象数组内设置对象数组的状态

2 个答案: