[英]How to conditionally output data based on JavaScript object?
Any help? 有什么帮助吗? Let's say i have this array of objects.
假设我有这个对象数组。
const data = {
post: [
{
id: 1,
name: "lorem A",
lastseen: 1,
},
{
id: 2,
name: "lorem B",
lastseen: 16,
},
{
id: 3,
name: "lorem C",
lastseen: 3,
},
{
id: 4,
name: "lorem D",
lastseen: 10,
},
]`}
I'm working with simple react time component to display "hr" or "hrs". 我正在使用简单的反应时间组件来显示“ hr”或“ hrs”。 How to check if "data.lastseen" value is greater than 1?
如何检查“ data.lastseen”值是否大于1? So i can display like this "1 hr" or "2 hrs"
这样我就可以像这样显示“ 1小时”或“ 2小时”
I know to map this but conditionally add and display "hr" or "hrs" to each object I'm having trouble with. 我知道要对此进行映射,但有条件地向遇到问题的每个对象添加并显示“ hr”或“ hrs”。
const mapData = data.map((seen) => seen.lastseen)
I googled it to extract values from Object we can use "Object.values()" But not sure how to combine with map. 我用谷歌搜索它可以从Object中提取值,我们可以使用“ Object.values()”,但不确定如何与map结合。
Updated code This is my react component 更新的代码这是我的react组件
<Main>
{Request.data.post.map((user) => {
return (
<Col
//I'm display other component here
<User user={user} />
//I'm display other component here
</Col>
);
})}
const User = ({ user }) => {
return (
<Col>
<Seen user={user} />
</Col>
);
};
const Seen = ({ user }) => {
return <React.Fragment> {user.map((seen) =>
seen.lastseen == 1 ? seen.lastseen + "hr" : seen.lastseen + "hrs"
)}</React.Fragment>;
};
由于您无法在jsx中使用if if else,因此请使用如下三元运算符:
const mapData = data.map(seen => (seen.lastseen == 1 ? 'hr': 'hrs'));
for(var i=0; i<data.length; i++) {
if(data[i].lastseen === 1) {
// display 1 + 'hr'
} else if(data[i].lastseen > 1) {
//diplay data[i].lastseen + 'hrs'
}
}
here is my solution: 这是我的解决方案:
import React from "react"; class App extends React.Component { render() { const data = [ { id: 1, name: "lorem A", lastseen: 1 }, { id: 2, name: "lorem B", lastseen: 16 }, { id: 3, name: "lorem C", lastseen: 3 }, { id: 4, name: "lorem D", lastseen: 10 } ]; return ( <div> {data.map(item => { return item.lastseen === 1 ? ( <p key={item.id}>{item.lastseen}hr</p> ) : ( <p key={item.id}>{item.lastseen}hrs</p> ); })} </div> ); } } export default App;
Now, i figured it out thanks for help. 现在,我想通了,谢谢您的帮助。
I updated my seen component to 我将看到的组件更新为
const seen = ({ user }) => {
return (
<React.Fragment>
{user.lastseen == 1 ? user.lastseen + "hr" : user.lastseen + "hrs"}
</React.Fragment>
);
};
My mistake I thought "user" is still an array which is not it's an object. 我以为“用户”仍然是一个数组,不是一个对象,这是我的错误。 That's why I keep getting an error "TypeError: user.map is not a function"
这就是为什么我不断收到错误“ TypeError:user.map不是函数”的原因
From your code above 从上面的代码
const Seen = ({ user }) => {
return <React.Fragment> {user.map((seen) =>
seen.lastseen == 1 ? seen.lastseen + "hr" : seen.lastseen + "hrs"
)}</React.Fragment>;
};
will thrown an error 会抛出一个错误
TypeError: user.map is not a function
TypeError:user.map不是函数
As user
is an object you can use Object.keys
and map over it. 由于
user
是对象,因此可以使用Object.keys
并在其上进行映射。 So change your code 所以改变你的代码
const Seen = ({ user }) => {
return <React.Fragment> { Object.keys(user).map((key) => (key == 'lastseen' ? (user[key] == 1 ? user[key] + ' hr': user[key] +' hrs') : null)) } </React.Fragment>;
};
and it will work fine. 它将正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.