React 错误：对象在功能组件中作为 React 子项无效答案

【问题标题】：React Error: Objects are not valid as a React child in a Functional ComponentReact 错误：对象在功能组件中作为 React 子项无效
【发布时间】：2020-08-04 08:02:36
【问题描述】：

我为这个错误做了很多研究，但我发现大多数是类组件的例子得到了错误，我正在使用函数组件！这是我正在做的 React 课程的要求，我们正在做第一个项目，另一个要求是仍然不要使用 -create-react-App :(

所以，他们给了我们 React 和 Babel 脚本，这是我的 HTML 脚本：

   <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>    
    <script type="text/babel" src="./scripts/app.js"></script>

请不要笑！！！

不起作用的代码是：

function App() {

const today = new Date()
console.log(today);

let filters = {
  dateFrom: today,
  // dateTo: new Date(today.valueOf() + 86400000),
  // country: "",
  // price: 0,
  // rooms: 0,
};

return (
  <div>
    <Hero filters={filters} />
  </div>
);
}

function Hero({ filters }) {
return (
  <section className="hero is-primary">
    <div className="hero-body">
      <div className="container">
        <h1 className="title">Hotels</h1>
        <h2 className="subtitle">
          from <strong>{filters.dateFrom}</strong> to
          <strong>dddd, DD of mmmm de AAAA</strong>
        </h2>
      </div>
    </div>
  </section>
);

ReactDOM.render(<App />, document.getElementById("app"));

}

问题是dateFrom: today，如果我向那里发送一个简单的字符串，它可以完美地工作，但我需要在对象中发送当前的日期，这是一个查找酒店的简单应用程序。这段代码的结构（使用 const 过滤器对象和功能组件）是在类中给我的，我应该让它工作:(

我正在关注此链接的示例：http://learningprogramming.net/modern-web/react-functional-components/pass-object-to-props-in-react-functional-components/ 但它使用 create-react-app...

我得到的错误是：未捕获的错误：对象作为 React 子级无效（发现时间：2020 年 4 月 21 日星期二 11:08:12 GMT-0300（阿根廷标准时间））。如果您打算渲染一组子项，请改用数组。

非常感谢！！！！！！

【问题讨论】：

标签： reactjs react-functional-component

【解决方案1】：

filters.dateFrom 是一个对象，正如您的错误消息所解释的，对象不能直接呈现为 React 子对象。

Date 对象可以呈现为字符串。最简单的情况如下所示。

<strong>{filters.dateFrom.toString()}</strong>

【讨论】：