使用 useState Hook 将项目附加到对象内部的数组答案

【问题标题】：Append a item to an array that is inside a object with useState Hook使用 useState Hook 将项目附加到对象内部的数组
【发布时间】：2021-04-29 19:39:36
【问题描述】：

我需要将新值附加到 useState 钩子内的数组中，这是接口和钩子：

interface ObjetoAdicionaItem {
    tipo: string;
    nome: string;
    borda: string;
    pratos: number;
    observacao: string;
    quantidade: [{
        pronome: string;
        quantidadeSabor: number;
    }];
}

这是钩子：

const [arrayItens, setArrayItens] = useState<ObjetoAdicionaItem>();
const [sabores, setSabores] = useState<DadosSabor[]>([]);

问题是当我尝试将新项目附加到数组quantidade;

示例代码：


sabores = [{
    quantidadeSabor: 1,
    pronome: "foo",
    preco: "bar",
    checked: false
  },
  {
    quantidadeSabor: 2
    pronome: "foo2",
    preco: "bar",
    checked: false
  }
]

let nome = sessionStorage.getItem("pronomeAtualSabor") || "";
sabores.map(item => {
  if (item.quantidadeSabor !== 0 && item.quantidadeSabor !== undefined) {
    setArrayItens({
      borda: bordaAtual,
      nome: nome,
      observacao: observacao,
      pratos: quantidadePratos,
      tipo: "sabor",
      quantidade: [{ ...arrayItens ? .quantidade,
        pronome : item.pronome,
        quantidadeSabor: item.quantidadeSabor
      }]
    });
  }
})

预期输出：

arrayItens: {
    borda: 'foo',
    nome: "bar",
    observacao: "...",
    pratos: 5,
    tipo: "sabor", 
    quantidade: [
        {
            pronome: "foo",
            quantidadeSabor: 1
        },
        {
            pronome: "foo2",
            quantidadeSabor: 2
        }
    ]   
}

【问题讨论】：

arrayItens 最初是undefined 这是故意的吗？它应该是一个数组吗？请添加一些示例数据和预期结果
arrayItens 将被填充到“sabores.map(...)”中，不，它不应该是一个数组，但是，里面有一个数组。我将使用示例进行编辑
map() 不是一种归档方法，也许你想要forEach()，但看起来你会在每次满足条件时覆盖setArrayItens。不清楚你想要什么...
我更新了示例代码，我希望它会更好地理解我想要的。
这不是根本问题，但您的 ObjetoAdicionaItem 接口将 quantidade 定义为 1 元素元组而不是数组，因此该类型声称它始终只包含 1 个元素。将[ 移动到对象的末尾，而不是用括号括住对象：quantidade: { pronome: ... }[]

标签： arrays reactjs typescript react-hooks

【解决方案1】：

如果我理解正确，你的代码应该是这样的：

setArrayItens((prevArrayItens) => ({
  ...prevArrayItens,
  quantidade: sabores.map(({pronome, quantidadeSabor}) => quantidadeSabor && {
    pronome,
    quantidadeSabor
 })
})

const sabores = [{
    quantidadeSabor: 1,
    pronome: "foo",
    preco: "bar",
    checked: false
  },
  {
    quantidadeSabor: 2,
    pronome: "foo2",
    preco: "bar",
    checked: false
  }
]

const result = sabores.map(({
  pronome,
  quantidadeSabor
}) => quantidadeSabor && {
  pronome,
  quantidadeSabor
});

console.log(result);

【讨论】：

谢谢，但这不是我想要的。我将尝试解释：我有一个具有一些属性的对象，以及该第一个对象内的一组对象。我只想填充第一个属性一次，并将其他值附加到第一个对象内的对象数组中。
@MuriloDagustin 不是注释代码在做什么吗？该演示仅显示 quantidade 属性的正确值。
如果没有 React 和它周围的一切，演示就无法运行像 setArrayItens 这样的东西
我试过了，但现在我得到了这个错误：```Type '(0 | { pronome: string; quantidadeSabor: number; } | undefined)[]' is notassignable to type '[{代词：字符串； quantidadeSabor：数字； }]'。目标需要 1 个元素，但源可能有更少。ts(2322) ```
@MuriloDagustin 这是一个打字稿错误，“斯蒂芬詹宁斯”在您的问题的 cmets 中提到了解决方案