React Error: Objects are not valid as a React child in a Functional Component

Question

我对这个错误做了很多研究，但我发现大部分示例都是 Class 组件出现错误，而我使用的是功能组件！！这是我正在做的 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: 今天，如果我向那里发送一个简单的字符串，它会完美地工作，但我需要在对象内部发送当前的日期，这是一个简单的应用程序寻找酒店。类中提供了此代码的结构（使用 const 过滤器对象和功能组件），我应该让它工作:(

我正在效仿这个 link 的例子：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（阿根廷标准时间））。如果您打算呈现子项集合，请改用数组。

非常感谢!!!!!

Answer 1

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

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

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

React Error: Objects are not valid as a React child in a Functional Component

React Error: Objects are not valid as a React child in a Functional Component

reactjs

react-functional-component