过滤数据导致称为“解析错误：意外令牌”的错误答案

【问题标题】：Filtering data causing an error called "Pasring error: Unexpected Token"过滤数据导致称为“解析错误：意外令牌”的错误
【发布时间】：2021-09-10 03:37:55
【问题描述】：

这是代码框链接：https://codesandbox.io/s/filter-sr3ci?file=/src/App.js:24-1548

我有这些 JSON 数据，我正在尝试过滤其他人的所有值并同时计算它们。示例：

"1" 中其他人的价值观之一是书：

{
      displayName: "Person3",
      "1": { others: "book", items1: { car: true, bike: true } },
      "2": {
        others: "",
        items2: { bike: true, motor: true, truck: true }
      }
    },

    {
      displayName: "Person4",
      "1": { others: "book", items1: { car: true, bike: true } },
      "2": { others: "", items2: { truck: true, bike: true } }
    },

我想在屏幕上显示如下内容：

"1" data:
Book - 2

与“2”相同，具有风扇和电线的值：

"2" data:
fan - 3
wire - 2

我尝试过滤它，但它在这段代码中有一条红线，并且有一个错误提示“解析错误”：

const others1  = data.filter((d) => d."1"?.others !== "")

以下是代码：

export default function App() {
  const data = [
    {
      displayName: "Person1",
      "1": { others: "", items1: { car: true, motor: true } }
    },
    {
      displayName: "Person2",
      "1": {
        others: "",
        items1: { car: true, motor: true, bike: true }
      },
      "2": { items2: { truck: true, bike: true }, others: "wire" }
    },

    {
      displayName: "Person3",
      "1": { others: "book", items1: { car: true, bike: true } },
      "2": {
        others: "wire",
        items2: { bike: true, motor: true, truck: true }
      }
    },

    {
      displayName: "Person4",
      "1": { others: "book", items1: { car: true, bike: true } },
      "2": { others: "", items2: { truck: true, bike: true } }
    },
    {
      displayName: "Person5",
      "1": { others: "", items1: { motor: true, car: true } },
      "2": {
        items2: { truck: true, bike: true },
        others: "fan"
      }
    },
    {
      displayName: "Person6",
      "2": {
        items2: { car: true, truck: true, motor: true },
        others: "fan"
      }
    },
    {
      "1": { others: "book", items1: { motor: true, car: true } },
      "2": {
        items2: { car: true, truck: true },
        others: "fan"
      },

      displayName: "Person7"
    }
  ];

  const others1  = data.filter((d) => d."1"?.others !== "")
  // console.log(others1.length);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

【问题讨论】：

应该是data.filter((d) => d["1"].?others !== "")
为什么不使用数组而不是带有数字键的对象？

标签： javascript reactjs json

【解决方案1】：

如果您想使用数字键访问对象，请使用Index Property Accessor

const person = {
  1: 'John',
  2: 'Doe'
};

console.log(person['1']);

所以改成这样：

const others1  = data.filter((d) => d["1"]?.others !== "")

【讨论】：

我怎样才能同时显示和计算others？由于此others 取自用户输入的内容，可能每次都不同
然后您需要将您的others 存储到一个状态中，每次用户更改它时更新该状态。算起来，Array.reduce 函数会有所帮助。
我试过这个，但它说“无法读取未定义let red = [...others1].reduce( (a, c) => ( (a[c.["1"]?.others] = (a[c.["1"].others] || 0) + 1), a ), {} );的属性“其他”@
这有点脱离了这个问题的背景，您能否针对该特定问题发布另一个问题？
谢谢。我已经用这个提出了：stackoverflow.com/questions/69127214/…