Question

我对此错误进行了很多研究，但是我发现大多数示例都由类组件引起错误，并且我正在使用功能组件！这是我正在做的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过滤器对象和功能组件）是在类中提供给我的，我应该使其起作用:(

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

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

非常感谢！！！

Answer 1

filters.dateFrom是一个对象，并且如您的错误消息所述，不能将对象直接呈现为React子代。

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

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

React错误：对象在功能组件中作为React子元素无效

1 个答案: