Блог

Итак, у меня есть текстовые поля пользовательского интерфейса Material, которые получают некоторые данные из API, и вот мой код. Это работает отлично, но я хочу упростить его, и я понятия не имею, как это сделать. Я думал об использовании map, но не уверен, как обращаться с вложенными 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>   

Похоже, 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>
  

Я бы также предложил а) ввести queryCache.getQueryData('x1') переменную и повторно использовать ее, а не пересчитывать каждый раз, и б) придумать что-то получше key .

Итак, с помощью @DrewReese мне удалось разобраться с этим и заставить его работать. Вот решение для дальнейшего использования.

Я убрал логику за пределы return(), и это помогло мне создать не избыточный код.

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

И затем просто в моем заявлении return для JSX у меня есть то, что предложил @DrewReese:

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

Примечание: я изменил значения на x / y / z, поскольку это конфиденциальная информация, которая не может быть общедоступной.

Спасибо за всю помощь!

Это должно сработать:

   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] } />
    ))