如何基於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,
  },
]`}

我正在使用簡單的反應時間組件來顯示“ hr”或“ hrs”。 如何檢查“ data.lastseen”值是否大於1？ 這樣我就可以像這樣顯示“ 1小時”或“ 2小時”

我知道要對此進行映射，但有條件地向遇到問題的每個對象添加並顯示“ hr”或“ hrs”。

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

我用谷歌搜索它可以從Object中提取值，我們可以使用“ Object.values（）”，但不確定如何與map結合。

更新的代碼這是我的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>;
};

Answer 1

由於您無法在jsx中使用if if else，因此請使用如下三元運算符：

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

會拋出一個錯誤

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

它將正常工作。