[英]How to display key and value from array in Text in React Native?
I'm trying to map/loop through my array, so I can display every key and value on my mobile app screen.我正在尝试映射/循环遍历我的数组,这样我就可以在我的移动应用程序屏幕上显示每个键和值。
This is my array这是我的数组
const getExpense = [{"fecha": "09", "text": "Comida", "value": 2896}, {"fecha": "09", "text": "Misc", "value": 1714}, {"fecha": "09", "text": "Transporte", "value": 1525}, {"fecha": "09", "text": "Salida", "value": 1260}, {"fecha": "09", "text": "Deporte", "value": 560}, {"fecha": "09", "text": "Farmacia", "value": 367}, {"fecha": "09", "text": "Pulperia", "value": 126}, {"fecha": "09", "text": "Ayuda", "value": 50}]
I did some research and this is the function I found that could work for me to map over every object.我做了一些研究,这是 function,我发现它可以为我工作到 map 超过每个 object。 It should work with just 1 item.
它应该只适用于 1 个项目。 But I have 3 items: fecha, text and value.
但我有 3 项:fecha、text 和 value。
function display(){
return getExpense.map((item,item1,item2)=>{
return(
<RN.Text>
{item} {item1} {item2}
</RN.Text>
)
})
}
And here's my RN code to return the Display function.这是我的 RN 代码,用于返回显示 function。 I also tried to return it in a but that didn't work out.
我也尝试将它退回,但没有成功。
return(
<RN.View>
<RN.Text>
{display()}
</RN.Text>
</RN.View>
)
And it's giving me this problem:它给了我这个问题:
Render Error: Objects are not valid as a React Child (Found: an object with keys {fecha, text, value}. If you meant to render a collection of children, use an array instead.渲染错误:对象作为 React Child 无效(发现:带有键 {fecha, text, value} 的 object。如果您要渲染子集合,请改用数组。
Any help will be greatly appreciated.任何帮助将不胜感激。
I was able to fix it.我能够修复它。
I changed my function to the objects key names, so instead of item, item1, item2, I used value and text (Name of my keys).我将 function 更改为对象键名,因此我使用值和文本(我的键名)代替了 item、item1、item2。
Please take a look for anyone who'se having the same problem.请看看有同样问题的任何人。
function display(){
return getExpense.map(({text, value})=>{
return(
<RN.Text>
{text} : {value}
</RN.Text>
)
})
}
const getExpense = [{"fecha": "09", "text": "Comida", "value": 2896}, {"fecha": "09", "text": "Misc", "value": 1714}, {"fecha": "09", "text": "Transporte", "value": 1525}, {"fecha": "09", "text": "Salida", "value": 1260}, {"fecha": "09", "text": "Deporte", "value": 560}, {"fecha": "09", "text": "Farmacia", "value": 367}, {"fecha": "09", "text": "Pulperia", "value": 126}, {"fecha": "09", "text": "Ayuda", "value": 50}]
function display(){
return getExpense.map((obj)=>{
return(
<RN.Text>
{Object.entries(obj).map(([key, value]) => `${key}: ${value}`).join(' ,')}
</RN.Text>
)
})
}
console.log(display())
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.