Реагировать: как определить переменную в jsx и использовать ее в коде?

в коде реакции JSX есть ситуация, когда я хочу перебрать объект и отобразить ключ и значение,

Объект возвращается вызовом функции.

Итак, чтобы перебрать объект, который я использую Object.keys,

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

Object.keys(dpsData = this.getDpsData(this.state.selectedComponentData)).map(key => 
(<div className = "componentStatus">
        <div className = "metaDataKey">{key}</div>
        <div className = "metaDataValue">{dpsData[key]}</div>
</div>))

Есть ли способ временно сохранить объект в переменной в коде JSX? и не используя какие-либо глобальные, состояния/переменные

Почему бы просто не сохранить значение в переменной вне JSX?

Guy Incognito 14.04.2023 08:08

да, мы можем сделать это, но этот объект просто нужен здесь, просто думаю, если это возможно, не создавать какой-либо глобальный объект,

rahul Kushwaha 14.04.2023 08:11

Вы не можете писать назначения в JSX, потому что они преобразуются в вызовы функций. Object.entries может быть полезно в этом случае. Или просто используйте переменную.

nullptr 14.04.2023 08:12

Он не будет глобальным, если вы не сделаете его глобальным. Создать локальную переменную вне блока JSX — это то же самое, что создать ее внутри, если это вообще возможно.

Guy Incognito 14.04.2023 08:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите по какой-то причине сохранить вызов функции в JSX, вы можете вместо Obect.keys использовать Object.entries, что дает вам доступ как к ключу, так и к значению, это будет выглядеть так:

Object.entries(this.getDpsData(this.state.selectedComponentData)).map(([key, value]) => {
return (<div className = "componentStatus">
        <div className = "metaDataKey">{key}</div>
        <div className = "metaDataValue">{value}</div>
</div>)
})

Другие вопросы по теме