Ошибка реагирования: объекты недопустимы как дочерние элементы реагирования в функциональном компоненте - PullRequest
Новая
       42

Ошибка реагирования: объекты недопустимы как дочерние элементы реагирования в функциональном компоненте

0 голосов
/ 21 апреля 2020

Я провел много исследований для этой ошибки, но я нахожу в основном примеры с компонентами класса, получающими ошибку, и я использую функциональные компоненты !! Это требование для курса React, который я делаю, мы работаем над первым проектом, и еще одно требование по-прежнему не использовать -create-Reaction-App: (

Итак, они дали нам React и вавилонские сценарии, вот мои 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 filters и функциональных компонентов) был дан мне в классах, и я должен заставить его работать :(

Я следовал примеру этой ссылки: http://learningprogramming.net/modern-web/react-functional-components/pass-object-to-props-in-react-functional-components/, но использует create-реагировать-приложение ...

Ошибка, которую я получаю: Uncaught Ошибка: объекты недопустимы как дочерний элемент React (найдено: вт 21 апр. 2020 11: 08:12 GMT-0300 (стандартное время Аргентины). Если вы хотите сделать коллекцию детей, вместо этого используйте массив.

Большое спасибо !!!!!

1 Ответ

1 голос
/ 21 апреля 2020

filters.dateFrom - это объект, и, как объясняется в вашем сообщении об ошибке, объекты не могут напрямую отображаться как дочерние элементы React.

Date объекты могут отображаться как строки. Простейший случай будет выглядеть примерно так: 

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