在映射中获取属性值，但在javascript中使用不同属性的名称

我是新来的，我有一个关于react函数的问题，我无法解决。这个解决方案很简单，但对我来说不起作用

我在React中建立了一个社交网络，在社交网络中我有用户，每个用户都有不同的名字，就像一把钥匙

我有一个match对象，它包含一个用户（由handle表示）和其他用户（由match（number）表示）之间的匹配

因为每个用户名都是唯一的，所以我想在密钥中使用它们。 问题是，对于每个用户，atribute的名称是不同的，我想不出一种方法，能够在一个循环中为所有用户访问

match = 
[
  {handle: "backend4" , ...},
  {match_1: "backend1" , ...},
  {match_2: "backend2" , ...},
  {match_3: "backend3" , ...},
  {match_4: "devops1" , ...},
  {match_5: "devops2" , ...},
  {match_6: "mobile2" , ...},
  {match_7: "test500" , ...},
  {match_8: "testing100" , ...},
  {match_9: "testing200" , ...},
  {match_10: "testtttttt" , ...},
];


recentMatchesMarkup = match.map((singleMatch) =>
 <Match key={singleMatch.id} matchInfo={singleMatch} />)
        );

match=
[
{handle:“backend4”，…}，
{match_1:“backend1”，…}，
{match_2:“backend2”，…}，
{match_3:“backend3”，…}，
{match_4:“devops1”，…}，
{match_5:“devops2”，…}，
{match_6:“mobile2”，…}，
{match_7:“test500”，…}，
{match_8:“testing100”，…}，
{match_9:“testing200”，…}，
{match_10:“testtttttt”，…}，
];
recentMatchesMarkup=match.map（（singleMatch）=>
)
);

---

我确信问题很小，但我想不出如何处理它

以下是如何访问

match\u x

的值，x是循环的索引：

match.map（（el，i）=>console.log（el[

match{i}

]））

（上面有一个特殊的引号包装

match_${i}

。我就是不能显示它，因为它们是用来显示代码的。看看你是否不知道）

但请注意，is仅适用于键

match_x

，因此，如果您100%确定它适合您，请使用它。 第一个键

句柄

将不会显示（返回未定义），因此您可能需要添加一个条件来显示

组件

为了确保每个匹配对应于索引，下面介绍了如何进行匹配，下面是代码：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  const [sortedMatch, setSortedMatch] = React.useState([]);
  const match = [
    { handle: "backend4" },
    { match_2: "backend2" },
    { match_3: "backend3" },
    { match_1: "backend1", test: "text" },
    { match_4: "devops1" },
    { match_5: "devops2" },
    { match_6: "mobile2" },
    { match_7: "test500" },
    { match_8: "testing100" },
    { match_9: "testing200" },
    { match_10: "testtttttt" }
  ];
  React.useEffect(() => {
    const matchByIndex = [];

    match.forEach(el => {
      const key = Object.keys(el).find(k => k.includes("match"));
      if (key) {
        let nb = key.split("_");
        nb = nb[nb.length - 1];
        matchByIndex[nb] = el;
      }
    });
    setSortedMatch(matchByIndex);
  }, []);

  if (!sortedMatch.length) return <>Loading...</>;
  return (
    <div>
      {sortedMatch.map((el, i) => (
        <>
          {el[`match_${i}`]}
          <br />
        </>
      ))}
    </div>
  );
};

render(<App />, document.getElementById("root"));

import React，{Component}来自“React”；
从“react dom”导入{render}；
导入“/style.css”；
常量应用=（）=>{
const[sortedMatch，setSortedMatch]=React.useState（[]）；
常数匹配=[
{handle:“backend4”}，
{match_2:“backend2”}，
{match_3:“backend3”}，
{match_1:“backend1”，test:“text”}，
{match_4:“devops1”}，
{match_5:“devops2”}，
{match_6:“mobile2”}，
{match_7:“test500”}，
{match_8:“testing100”}，
{match_9:“testing200”}，
{match_10:“testtttttt”}
];
React.useffect（（）=>{
常量matchByIndex=[]；
match.forEach（el=>{
const key=Object.keys（el.find）（k=>k.includes（“匹配”）；
如果（关键）{
设nb=key.split（“”）；
nb=nb[nb.长度-1]；
匹配索引[nb]=el；
}
});
setSortedMatch（matchByIndex）；
}, []);
如果（！sortedMatch.length）返回装载。。。；
返回(
{sortedMatch.map（（el，i）=>(
{el[`match{i}`]}


))}
);
};
render（，document.getElementById（“根”））；

match\ux属性应该是一个句柄数组，您的意思是要执行

，其中

match\ux

是

match\u1

，

match\u2

。。。而

foo

是

match.match_X

？如果您试图使用object.keys（）获取所有键，则无法映射到对象上。非常感谢，很抱歉我更正了问题，顺便说一下，对象内的句柄我不需要，只是为了方便，我将知道匹配属于谁。非常感谢您的帮助，我想可能有问题，因为match_x在数组中没有按顺序排序，我如何确定它们是按顺序排序的？@哈哈，我编辑了我的答案，给你一个如何过滤数据的示例。但是，如果您可以重新编写api以获得更干净的东西，那就更好了。这段代码非常具体，所以要小心。