在地图内连接 React答案

【问题标题】：Concating inside a map React在地图内连接 React
【发布时间】：2022-11-10 08:57:20
【问题描述】：

我正在尝试在映射函数中使用 concat 。在这段代码中，您会看到我的函数，它首先检查芯片数组中是否有任何芯片。如果没有，则创建一个芯片。这部分工作正常。如果有筹码并且筹码的 ID 与我的目标的 ID 匹配，我只更改显示的文本而不创建另一个筹码。这也很好，但我希望，如果不是这种情况，我将能够连接另一个芯片，但这不起作用。我也没有出错，当我记录最后一部分时，它显示芯片被添加到阵列中。

我在这里错过了一些非常简单的东西吗？我想提供更多代码，但我的项目有很多导入和东西，这会使这篇文章很长。谢谢你的帮助：）

const onAddBtnClick = (e) => {
    setChipsActive(true);
    setChips(
      chips.length === 0
        ? chips.concat({
            key: chips.length,
            label: e.target.value.toUpperCase(),
            id: e.target.name,
          })
        : chips.map((obj) => {
            if (obj.id === e.target.name) {
              return { ...obj, label: e.target.value.toUpperCase() };
            } else {
              chips.concat({
                key: chips.length,
                label: e.target.value.toUpperCase(),
                id: e.target.name,
              });
            }
            return obj;
          }),
    );
  };

【问题讨论】：

concat 返回一个新数组，它不会改变原来的。所以你的 concat 结果被忽略了

标签： javascript reactjs arrays

【解决方案1】：

js函数concat存在于数组上，只能和其他数组一起使用。

因此，要解决您的问题，我建议您将尝试与数组连接的对象包装起来，就像这样

chips.concat([{
                key: chips.length,
                label: e.target.value.toUpperCase(),
                id: e.target.name,
              }]);

需要注意的是，这仅返回一个数组，其中两个数组都连接在一起，如果要将对象推入我将使用的数组中

chips.push({
                key: chips.length,
                label: e.target.value.toUpperCase(),
                id: e.target.name,
              });

反而。

【讨论】：

【解决方案2】：

为我解决这个问题的方法是将数组操作置于映射之外，并为它编写另一个条件，如下所示：

const onAddBtnClick = (e) => {
   setChipsActive(true);
const obj = {
     key: chips.length,
     label: e.target.value.toUpperCase(),
     id: e.target.name,
   };
   const newChips = (prevChips) => [...prevChips, obj];
   const updateChips = chips.map((obj) => {
     if (obj.id === e.target.name) {
       return { ...obj, label: e.target.value.toUpperCase() };
     } else {
       return obj;
     }
   });
   const hasChip = chips.some((el) => el.id === e.target.name);
   if (!hasChip) {
     setChips(newChips);
   } else {
     setChips(updateChips);
   }```

【讨论】：