React：道具未定义，即使它们应该是

Question

我的子类中的 props 应该是 Event 对象的数组。

我事先检查 App.js 中的数组是否为空，如下所示：

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] = ([])
  const [eventsPrep, setEventsPrep] = useState([Event])

  useEffect(() => {
      fetch('https://someAPI.com')
      .then(response => response.json())
      .then(
        res => {setEvents(res); 
        console.log(res);
      })
      .catch(err => console.log(err))
      .then(handleIncomingData())
      //.then(console.log("was here"))
  }, [])

  function handleIncomingData () {
    if(events.length > 0) {
      events.forEach(event => {
        ids.push(event["_id"]);
        let date = new Date(event["date"]);
        eventsPrep.push(new Event(event["_id"], event["title"], date.toDateString()))
      })
    } 
  }

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

export default App;

但是每当我尝试访问子组件中的 props 时，它都会被认为是未定义的。

我的子组件：

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


export const Home = (props) => {
    console.log(props.events)
    return (
        <>
          {props?.events
            ? props.events.forEach((event) => {
                console.log('was here 2');
                return <SingleEvent title={event.title} start={event.date} />;
              })
            : 'no upcomming events'}
        </>
    );
  
}

即使我只向下传递一个字符串，它仍然是未定义的。

感谢您的帮助！

Answer 1

在您的

useEffect()

中，您通过

events

更新

setEvents(res)

，然后致电

handleIncomingData()

。

在

handleIncomingData()

中，您使用

events

，但它仍会保留先前渲染/初始化中的值，因为

setEvents(res)

不会立即更改

events

。您可以在该函数内

console.log(events)

来调查这一点。 相反，您可以将

res

传递到

handleIncomingData()

并在该函数中使用它而不是

events

。所以在你

useEffect

你会：

.then(response => response.json())
.then(
    res => {
      setEvents(res); 
      handleIncomingData(res);
    })

此外，在

handleIncomingData()

中使用

setEventsPrep(...)

而不是

eventsPrep.push()

，如评论中所述。

Answer 2

您在组件中返回 2 个 return 语句。只需要在组件中返回1个return语句

export const Home = (props) => {
  return (
    <>
      {props?.events && Object.values(props.events).length > 0
        ? props.events.forEach((event) => {
            console.log('was here 2');
            return <SingleEvent title={event.title} start={event.date} />;
          })
        : 'no upcoming events'}
    </>
  );
};

还要检查 eventsPrep 的长度是否> 0，然后如果 eventsPrep 是一个对象，则尝试这种方式

eventsPrep && Object.values(eventsPrep).length > 0