Question

所以我有Material UI Textfields，它们从API获取一些数据，这是我的代码。它运行完美，但我想简化它，甚至不知道如何实现。我当时在考虑使用地图，但不确定如何处理嵌套的z元素。任何帮助将不胜感激！

P.S。我是初学者。

             <div>
              <TextField value={queryCache.getQueryData('x1').y1}/>
              <TextField value={queryCache.getQueryData('x1').y2}/>
              <TextField value={queryCache.getQueryData('x1').y3.z1}/>
              <TextField value={queryCache.getQueryData('x1').y3.z2}/>
              <TextField value={queryCache.getQueryData('x1').y4}/>
              ...
            </div>

Answer 1

看起来queryCache.getQueryData('x1')是各种“集合”，其中包含可从不同路径访问的多个值。

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

const paths = [
  [ "y1" ], // [ "name" ]
  [ "y2" ], // [ "age" ]
  [ "y3", "z1" ], // [ "location", "country" ]
  [ "y3", "z2" ], // [ "location", "city" ]
  [ "y4" ], // [ "occupation" ]
];

function getValue(collection, path) {
  return path.reduce((subCollection, key) => subCollection[key], collection);
}

// Examples:
// getValue({ name: "John" }, [ "name" ])
// => "John"
// getValue({ location: { country: "US", city: "NYC" } }, [ "location", "city" ])
// => "NYC"

<div>
  {paths.map((path) => (
    <TextField value={getValue(queryCache.getQueryData('x1')), path} key={path.join(",")} />
  ))}
</div>

我还建议a）将queryCache.getQueryData('x1')放入变量中并重用它，而不是每次都重新计算它，b）提出一个更好的key。

Answer 2

因此，在@DrewReese的帮助下，我设法解决了这个问题，并使之工作。这是解决方案，供将来参考。

我已经在return（）之外提取了逻辑，这帮助我创建了非冗余代码。

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

然后在我的JSX的return语句中，我有@DrewReese的建议：

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

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

谢谢您的帮助！

Answer 3

这应该有效：

  const coordinates = [
        {
            x: x1,
            y: y1
        },
        {
            x: x2,
            y: y2
        },
        {
            x: x3,
            y: y3,
            z: z1
        },
        {
            x: x4,
            y: y3,
            z: z2
        },
        {
            x: x5,
            y: y4
        },
    ]

    coordinates.map(({x, y, z}) => (
        <TextField value={z ? queryCache.getQueryData(x)[y][z] : queryCache.getQueryData(x)[y] } />
    ))

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

3 个答案: