в коде реакции 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, потому что они преобразуются в вызовы функций. Object.entries
может быть полезно в этом случае. Или просто используйте переменную.
Он не будет глобальным, если вы не сделаете его глобальным. Создать локальную переменную вне блока JSX — это то же самое, что создать ее внутри, если это вообще возможно.
Если вы хотите по какой-то причине сохранить вызов функции в 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>)
})
Почему бы просто не сохранить значение в переменной вне JSX?