React中如何访问嵌套对象内的数据？生日筛选功能实现问题求助

嘿，我看到你作为React新手，在处理嵌套对象的生日数据过滤时遇到了几个典型问题，咱们一步步拆解并修复它们：

首先，先梳理你的代码里的核心问题： #

• 错误使用filter方法：filter的作用是筛选出符合条件的数组元素，它需要返回布尔值，而不是直接返回JSX元素。你现在把渲染逻辑塞到了filter里，这完全不符合它的设计用途。
• 忽略props传入的people：你的List组件里直接用了全局的data数组，而不是父组件传进来的people props，这样父组件的setPeople([])清空操作根本不会生效。
• 日期变量的作用域问题：你在组件外部定义的year/month/date只会在页面加载时计算一次，如果用户在当天不同时间打开页面，或者跨零点使用，这些值不会自动更新。
• 标题计数错误：你写的{List.length}是无效的，应该展示过滤后的生日人数。

修正后的完整代码 #

import { useState, useMemo } from 'react';

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' 
  }, 
];

function App() {
  const [people, setPeople] = useState(data);

  // 使用useMemo缓存今日日期，避免每次渲染都重新计算
  const todayDate = useMemo(() => {
    const today = new Date();
    return {
      year: today.getFullYear(),
      month: today.getMonth() + 1,
      date: today.getDate()
    };
  }, []);

  // 筛选出今天生日的人
  const todayBirthdays = useMemo(() => {
    return people.filter(person => {
      return person.birthday.month === todayDate.month && person.birthday.date === todayDate.date;
    });
  }, [people, todayDate]);

  return (
    <section className='container'>
      {/* 显示今天生日的人数 */}
      <h1>{todayBirthdays.length} birthdays today</h1>
      <List people={todayBirthdays}/>
      <button className="btn" onClick={() => setPeople([])}>Clear All</button>
    </section>
  )
}

const List = ({people}) => {
  // 对筛选后的数组进行map渲染
  return (
    <>
      {people.map((person) => {
        const {id, name, birthday, img} = person;
        const age = new Date().getFullYear() - birthday.year;
        return (
          <article className='person' key={id}>
            <h2>{name}</h2>
            <p>{age} years old</p>
            <img src={img} alt={name}></img>
          </article>
        );
      })}
    </>
  )
}

export default App;

关键改动说明： #

1. 拆分筛选与渲染逻辑：先用filter筛选出符合条件的生日数据，再用map方法渲染对应的JSX元素，这是React中处理列表数据的标准流程。
2. 使用useMemo优化性能：把日期计算和筛选逻辑用useMemo缓存，只有当依赖项（people或日期）变化时才重新计算，避免不必要的渲染。
3. 正确使用props：List组件现在完全依赖传入的people props，父组件的状态更新能正确传递到子组件。
4. 修复年龄计算：直接用当前年份减去出生年份，确保年龄计算正确（如果需要更精确的年龄计算可以扩展，但基础场景这样就够了）。
5. 正确的标题计数：用todayBirthdays.length展示今天生日的人数，而不是无效的List.length。

这样修改后，你的代码就能正确筛选出今天生日的用户并渲染，同时也符合React的最佳实践啦！

内容的提问来源于stack exchange，提问作者Gaurav Tamang