Сокращенная проверка для сопоставления значения поля объекта и ключа объекта с элементом Tsx

Добрый вечер.

У меня есть массив объектов, который я пытаюсь сопоставить с элементом таблицы tsx, однако мне нужно отобразить связанный ключ каждого поля.

Я пробовал использовать Object.keys (item) [index], но не могу заставить его вернуть значение. Я ищу помощь с быстрой проверкой, я уже пробовал несколько, но безуспешно.

                  {myArray.map((item: any) => (
                      <TableRow key={item.name}>
                        <TableCell >{item.name === row.name ? `${Object.keys(item)[2]}` && item.a || item.b || item.c || item.d || item.e : null}</TableCell>
                      </TableRow>
                    ))}

Мой массив выглядит следующим образом:

[
  {
   a: 2,
   name: "obj1"
  },
  {
  b: 3,
  name: "obj2"
  },
  {
   c: 2,
   d: 5,
   name: "obj3"
  }
]

Когда я сопоставляю элемент, он вернет объект строки таблицы для каждого объекта, однако я пытаюсь получить данные строки для отображения следующим образом.

"a 2 ", // this will be the row data for obj1
"b 3 ",
"c 2, d 5"

TIA :)


reactjs javascript mapping shorthand
person PengProgrammer    schedule 28.12.2020    source источник
comment
Можете ли вы привести конкретный пример ожидаемого вывода JSX? Мне непонятно, какую именно логику вы пытаетесь реализовать.   -  person CertainPerformance    schedule 28.12.2020
comment
Привет, конечно, я отредактировал вопрос, я думаю, что он имеет больше смысла, но я не слишком уверен, все еще довольно новичок во всем этом.   -  person PengProgrammer    schedule 28.12.2020

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, вам нужно перебрать записи (кроме ключа name) и объединить ключи и значения вместе:

<TableRow key={item.name}>
  <TableCell>{GetCell(item)}</TableCell>
</TableRow>

const GetCell = ({ name, ...rest }) => {
  return Object.entries(rest)
    .map(entry => entry.join(' '))
    .join(', ');
};

Или, если вам нужна отдельная ячейка для каждого ключа, отличного от name:

{myArray.map(({ name, ...rest }) => (
  <TableRow key={name}>{
      Object.entries(rest)
        .map(entry => <TableCell>{entry.join(' ')}</TableCell>)
  }</TableRow>
))}
person CertainPerformance    schedule 28.12.2020
comment
Привет, это отличный ответ, особенно третье решение, которое вы предоставили. Однако он возвращает все поля во всех объектах в массиве на obj a 2 b 3 c 2 d 5 для каждого объекта, поэтому он возвращает, что для obj1, obj2, obj3 было бы правильно, если бы он вернул 2 для obj1 b 3 для obj2. Извините, если я неправильно общаюсь. Мой английский не очень хорош. - person PengProgrammer; 28.12.2020
comment
Однако каждый из них будет в отдельной строке таблицы - разве это не то, что вы хотели? В вашем вопросе указано "a 2 ", // this will be the row data for obj1 "b 3 " - person CertainPerformance; 28.12.2020
comment
Ах, мне очень жаль, вы правы. Приношу свои извинения, извините, что потратил ваше время. Строки вложены по каждому объекту. это складной стол. Стоит ли мне задать вопрос заново и отметить ваш ответ как правильный или отредактировать этот? - person PengProgrammer; 28.12.2020
comment
Поскольку ответ работает, все, что вам нужно сделать, это принять ответ. - person CertainPerformance; 28.12.2020