如何基于 JavaScript 对象有条件地输出数据

Question

有什么帮助吗？假设我有这个对象数组。

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,
  },
]`}

我正在使用简单的反应时间组件来显示"小时"或"小时"。如何检查"data.lastseen"值是否大于1？所以我可以像这样显示"1 小时"或"2 小时"

我知道要映射它，但有条件地向我遇到问题的每个对象添加和显示"hr"或"hrs"。

const mapData = data.map((seen) => seen.lastseen)

我用谷歌搜索它从对象中提取值，我们可以使用"对象值（）"但不确定如何与地图相结合。

更新的代码这是我的反应组件

<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>;
};

Answer 1

由于你不能使用 if 在 jsx 中使用这样的三元运算符：

const mapData = data.map(seen => (seen.lastseen == 1 ? 'hr': 'hrs'));

Answer 2

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'
    }
}

Answer 3

这是我

的解决方案：

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;

Answer 4

现在，我想通了，谢谢你的帮助。

我将看到的组件更新为

const seen = ({ user }) => {
  return (
    <React.Fragment>
      {user.lastseen == 1 ? user.lastseen + "hr" : user.lastseen + "hrs"}
    </React.Fragment>
  );
};

我的错误是我认为"用户"仍然是一个数组，而不是一个对象。这就是为什么我不断收到错误"TypeError：user.map 不是一个函数

Answer 5

从上面的代码中

const Seen = ({ user }) => {
  return <React.Fragment> {user.map((seen) =>
        seen.lastseen == 1 ? seen.lastseen + "hr" : seen.lastseen + "hrs"
      )}</React.Fragment>;
};

将抛出错误

类型错误：user.map 不是一个函数

由于user是一个对象，因此您可以使用Object.keys并在其上映射。所以改变你的代码

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>;
 };

它会正常工作。