React子组件props始终未定义问题求助

核心错误点梳理 #

• App.js中的state操作错误：

  • 直接修改state数组（ids.push()、eventsPrep.push()）：React的state是不可变的，必须通过setIds、setEventsPrep这类setter函数更新，直接修改不会触发组件重新渲染，也无法传递正确数据给子组件。
  • safedIds初始化错误：写成const [safedIds, setSafedIds] = ([])，正确写法应为const [safedIds, setSafedIds] = useState([])。
  • eventsPrep初始值错误：把Event类本身放进数组，应初始化为空数组[]。
  • useEffect中调用handleIncomingData()的方式错误：立即执行函数导致无法获取fetch后的最新events值，且setEvents是异步操作，此时events仍是初始空数组。
  • handleIncomingData依赖闭包中的旧events值：即使events更新，函数里拿到的还是初始空数组，无法正确处理数据。

• Home组件的渲染错误：

  • 使用forEach遍历数组：forEach无返回值，无法生成JSX元素列表，需用map遍历并返回SingleEvent组件。

修复后的代码 #

App.js

import React, { useState, useEffect } from 'react';
import Navbar from './Navbar'; // 确保路径正确
import { Home } from './Home'; // 确保路径正确

function App() {
  class Event {
    constructor(id, title, date) {
      this.id = id;
      this.title = title;
      this.date = date;
    }
  }

  const [events, setEvents] = useState([]);
  const [ids, setIds] = useState([]);
  const [safedIds, setSafedIds] = useState([]); // 修复初始化错误
  const [eventsPrep, setEventsPrep] = useState([]); // 修复初始值错误

  useEffect(() => {
    fetch('https://someAPI.com')
      .then(response => response.json())
      .then(res => {
        setEvents(res);
        console.log(res);
        // 直接在回调中处理数据，避免闭包问题
        handleIncomingData(res);
      })
      .catch(err => console.log(err));
  }, []);

  // 接收API返回的res作为参数，避免依赖闭包中的旧state
  function handleIncomingData(res) {
    if (res.length > 0) {
      const newIds = [];
      const newEventsPrep = [];
      res.forEach(event => {
        newIds.push(event["_id"]);
        let date = new Date(event["date"]);
        newEventsPrep.push(new Event(event["_id"], event["title"], date.toDateString()));
      });
      // 使用setter更新state
      setIds(newIds);
      setEventsPrep(newEventsPrep);
    }
  }

  return (
    <>  
      <Navbar/>
      {eventsPrep.length > 0 ? <Home events={eventsPrep}/> : <p>no upcoming events</p>}
    </>
  );
}

export default App;

Home组件

import React from 'react';
import SingleEvent from '../../event/SingleEvent';

export const Home = (props) => {
  console.log(props.events);
  return (
    <>
      {props?.events.length > 0 ? (
        props.events.map((event) => {
          console.log('was here 2');
          // 必须给列表元素加唯一key
          return <SingleEvent key={event.id} title={event.title} start={event.date} />;
        })
      ) : (
        'no upcoming events'
      )}
    </>
  );
};

额外说明 #

1. 处理state时始终遵循不可变原则：不要直接修改数组/对象，而是创建新的数组/对象后通过setter更新。
2. 列表渲染必须添加唯一key属性，帮助React识别元素变化，提升性能。
3. 异步操作后的数据处理尽量直接使用返回的响应值，避免依赖闭包中的state，防止获取旧值。

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