对象作为react子-react无效。
提问于 2022-07-13 05:01:23
在一个名为clickedCountry的变量中有一个对象，该变量的结构为{name:x, population: x, region:x, capital: x...}。我可以通过clickedCountry.population访问它。但是，如果我想以编程方式访问它(在我编写的地方，工作不起作用)，我将得到
对象作为响应子对象无效
{
['Name', 'Population', 'Region','Capital', 'Currencies', 'Languages'].map(el => {
let name = el.toLowerCase()
console.log(typeof(name)) //=>returns string
console.log(name) //=> returns population, region etc.
return (
<Typography gutterBottom component="div">
<span className='font-600'>{el}:</span>
{clickedCountry.name} //=> works
{clickedCountry[name]} //=> works not
{clickedCountry[`${name}`]} //=>works not
{clickedCountry[`${el.toLowerCase()}`]} //=>works not
</Typography>
)
});
}
回答 1
Stack Overflow用户
发布于 2022-07-13 05:38:29
听起来，您有一个不一定有相同键的对象数组，但是无论如何，您希望使用它们必须创建一些JSX的键来迭代它们。
在这里，我们将数据数组作为组件支柱传递。我们对数组进行map，对于每个对象，我们得到它的键(Object.keys()返回自己的数组)。然后，我们对键数组进行map，对于每个带有该键的对象属性，我们返回一些JSX。
const { useState } = React;
function Example({ data }) {
return (
<div>
{data.map(obj => {
const keys = Object.keys(obj);
return (
<div className="country">
{keys.map(key => {
return (
<div>
<span className="label">{key}: </span>
{obj[key]}
</div>
);
})}
</div>
);
})}
</div>
);
}
const data = [
{ name: 'US', population: '320M', region: 'Georgia', continent: 'North America' },
{ name: 'Spain', population: '47M', capital: 'Madrid', anthem: 'Marcha Real', continent: 'Europe' }
];
ReactDOM.render(
<Example data={data} />,
document.getElementById('react')
);.country { background-color: #efefef; padding: 0.2em; border: 1px solid #787878; }
.country:not(:last-child) { margin-bottom: 1em; }
.label { text-transform: capitalize; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72966792
复制
![[Linux] Nginx响应压缩gzip](https://ask.qcloudimg.com/http-save/yehe-2504969/4yhv1xrcku.png)
腾讯云开发者
