Javascript 如何简化组件中的冗余代码？

所以我有一些从API获取数据的材料UI文本字段，下面是我的代码。它工作得很完美，但我想简化它，我甚至不知道怎么做。我正在考虑使用映射，但不确定如何处理嵌套的z元素。任何帮助都将不胜感激

另外，我是个初学者

...

这应该可以：

const坐标=[
{
x:x1，
y:y1
},
{
x:x2，
y:y2
},
{
x:x3，
y:y3，
z:z1
},
{
x:x4，
y:y3，
z:z2
},
{
x:x5，
y:y4
},
]
坐标图（{x，y，z}）=>(
))

看起来像是

queryCache。getQueryData（'x1'）

是一个排序的“集合”，它包含多个可从不同路径访问的值

您可以做的是定义这些路径的列表并遍历它们，以获得所需的值：

const路径=[
[“y1”]，//[“名称”]
[“y2”]，//[“年龄”]
[“y3”，“z1”]，//[“位置”，“国家”]
[“y3”，“z2”]，//[“位置”，“城市”]
[“y4”]，//[“职业”]
];
函数getValue（集合、路径）{
返回路径.reduce（（子集合，键）=>子集合[key]，集合）；
}
//示例：
//getValue（{name:“John”}，[“name”]）
//=>“约翰”
//getValue（{location:{国家：“美国”，城市：“纽约”}，[“location”，“city”]）
//=>“纽约市”

{paths.map（（path）=>(
))}

---

我还建议a）将

queryCache.getQueryData（'x1'）

放在一个变量中并重用它，而不是每次都重新计算它；b）想出一个更好的

键，因此在@drewerese的帮助下，我成功地解决了这个问题，并使它工作起来。以下是供将来参考的解决方案

我去掉了return（）之外的逻辑，这帮助我创建了非冗余代码

const data = queryCache.getQueryData("x");
const values = [
  data.y1,
  data.y2.z1,
  data.y2.z2,
  data.y2.z3,
  data.y3,
  data.y4,
......
];

然后在JSX的返回语句中，我得到了@DrewReese的建议：

{values.map((value) => (
      <TextField value={value} />
    ))}

{values.map（（值）=>(
))}

注意：我已将值更改为x/y/z，因为这是无法公开的敏感信息

谢谢你的帮助
 您可以创建一个返回TextField组件的函数。其次，您可以在数组中填充值。然后，您必须使用值数组迭代TextField组件。@AhmadSuddle我不完全确定您的意思，您能给我举个例子吗？谢谢类似于
data=queryCache.getQueryData（'x1'），
值=[data.y1，data.y2，data.y3.z1，…]
，然后是
{values.map（value=>}
@epsiloneel，对于哪个元素我们必须得到z元素有什么特定的模式吗？@DrewReese谢谢你的回答，这完全有道理，但现在我不确定在哪里将这些值定义为我的
queryCache.getQueryData（'x'）
是从一个变异钩子异步更新的。你也能帮我吗？非常感谢！嗨，谢谢你的回答和你花的时间来回答我，但这根本不起作用，因为我需要再次硬编码，而且冗余看起来会以不同的方式相同。你能添加da的结构吗助教？