如何在反應中訪問嵌套物件內的資料值

我是新手，嘗試訪問嵌套物件內的資料時遇到問題。我正在嘗試創建一個應用程式，其中條件檢查今天的日期和串列的日期，如果條件為真，則回傳串列。

該串列如下所示：

const data = [{
    id: 1,
    name : 'Ashley',
    birthday : {
      year : 1998,
      month: 5,
      date : 22,
    },
    img : 'img'
  },
  {
    id: 2,
    name : 'Bill',
    birthday : {
      year : 1993,
      month: 2,
      date : 12,
    },
    img : 'img'
  },
];

我制作了一個日期物件，用來進行比較。

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() 1;
const date = today.getDate();

在串列中，生日包含其他三個值，我無法使用“過濾器”方法訪問它們。

其余代碼如下：

function App() {
  const [people, setPeople] = useState(data)
  return (
    <section className = 'container'>
      <h1>{List.length} birthdays today</h1>
    <List people= {people}/>
      <button className="btn" onClick ={() => { setPeople([])}}>Clear All</button>
    </section>
  )
}

const List = ({people}) =>{
  return (
    <>
     { data.filter((person) => {
       const {id, name, birthday, img} = person;
       const age = year-person.birthday.year;
      if(person.birthday.month === month && person.birthday.date === date){
        return(
         <article className= 'person' key = {id}>
            <h2>{name}</h2>
            <p>{age} years old</p>
            <img src = {img} alt = "person"></img>
         </article>
       )}
       return (
         []
       )
     })} 
    </>
  )
}

抱歉，描述太長了。

uj5u.com熱心網友回復：

該filter函式將謂詞作為回傳真或假的引數，然后回傳條件為真的元素。

您在謂詞中回傳 JSX/一個空陣列，所以我假設您想要的是map將元素實際傳遞給 JSX。

您的代碼將是：

const List = ({people}) =>{
  return (
    <>
      {people.map((person) => {
        const {id, name, birthday, img} = person;
        const age = year - birthday.year;
        if(birthday.month === month && birthday.date === date){
          return (
            <article className='person' key={id}>
                <h2>{name}</h2>
                <p>{age} years old</p>
                <img src={img} alt="person"></img>
            </article>
          )
        }
        return null;
      })} 
    </>
  )
}

我已經取代了data通過people，因為它是正確的道具，并[]通過null為[]無效JSX。

或者，您可以filter再map如下：

const List = ({people}) =>{
  return (
    <>
      {people
        .filter((person) => person.birthday.month === month && person.birthday.date === date)
        .map((person) => {
          const {id, name, birthday, img} = person;
          const age = year - birthday.year;
          return (
            <article className='person' key={id}>
                <h2>{name}</h2>
                <p>{age} years old</p>
                <img src={img} alt="person"></img>
            </article>
          )
        })}
    </>
  )
}

uj5u.com熱心網友回復：

您應該根據people傳入的內容而List不是data物件進行過濾。

const List = ({people}) =>{
  return (
    <>
      // instead of data
      { people.filter((person) => {
        const {id, name, birthday, img} = person;
        ...

這將允許您訪問id，name，birthday，和img

uj5u.com熱心網友回復：

您不需要對陣列內的單個物件進行過濾

const data = [{
id: 1,
name : 'Ashley',
birthday : {
  year : 1998,
  month: 5,
  date : 22,
},
img : 'img'
}]

let birthdayYear = data[0].birthday.year
let birthdayMonth = data[0].birthday.month
let birthdayDay = data[0].birthday.date

如果您只有單個物件，則可以這樣訪問，但如果有多個物件，則執行此操作

const data = [
{
    id: 1,
    name : 'Ashley',
    birthday : {
      year : 1998,
      month: 5,
      date : 22,
    },
    img : 'img'
    },
{
    id: 2,
    name : 'John',
    birthday : {
      year : 1993,
      month: 4,
      date : 12,
    },
    img : 'img'
    }
]

let myObject = data.find(element=> element.id === 2)
let birthdayYear = myObject.birthday.year
let birthdayMonth = myObject.birthday.month
let birthdayDay = myObject.birthday.date

如果你發現這個復雜，請告訴我

uj5u.com熱心網友回復：

您在大括號中傳遞道具：

<List people= {people}/>

它應該像這樣傳遞：

<List people=people/>

并且data.filter應該替換為people.map.

標籤：javascript 反应 if 语句 反应钩子 jsx

上一篇：如何在sas中使用陣列？

下一篇：使用物體框架的一對一關系