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

【问题标题】：React: props are undefined, even though they should beReact：道具是未定义的，即使它们应该是
【发布时间】：2022-09-22 21:19:47
【问题描述】：

我在 children 类中的 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;

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

我的子组件：

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\'}
        </>
    );
  
}

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

感谢帮助！

eventsPrep > 0 不是你检查数组是否为空的方式，你应该检查长度 eventsPrep.length > 0
在.forEach() 循环中使用return 在您的代码中没有多大用处。您可能想使用 .map() 并在您的 returned JSX 中使用它。
仍然当我记录 props.events 它是未定义的。所以主要问题是为什么它不识别数组。
你如何设置eventsPrep？
您直接修改eventsPrep 状态。您应该将您的状态值视为只读（即：不可变），而不是使用.push() 之类的方法更改它们。您需要创建一个新数组而不是使用eventsPrep.push() 推送，并使用该新数组调用setEventsPrep()。

标签： javascript reactjs undefined react-props

【解决方案1】：

您将在组件中返回 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 upcomming events'}
    </>
  );
};

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

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

【讨论】：

这并没有改变事实，道具仍然是未定义的。