Как исправить 'Объекты недопустимы как дочерние элементы React (найдено: объект с ключами)'

Question

Я хочу экспортировать объект, который находится в этом файле, config.js:

const CURRENT_YEAR = ( new Date() ).getFullYear()

export default { CURRENT_YEAR }

, когда я импортирую его в footer.js:

import React from 'react'
import  CURRENT_YEAR  from '../../config'

const footer = () => (
    <div  >
       @NBA { CURRENT_YEAR } All rights reserved.
   </div>  
)

export default footer

ошибки нетв кли, но React выдает эту ошибку:

Objects are not valid as a React child (found: object with keys {CURRENT_YEAR}). If you meant to render a collection of children, use an array instead.

Answer 1

Снимите скобки в вашем экспорте как таковые:

const CURRENT_YEAR = ( new Date() ).getFullYear()

export default CURRENT_YEAR

В противном случае вы инкапсулируете Date в объект, или вы можете сделать так:

в config.js:

const CURRENT_YEAR = new Date().getFullYear();

const config = {
  CURRENT_YEAR
};

export default config;

в footer.js:

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import config from "../../config";

function App() {
  return <div>
    @NBA {config.CURRENT_YEAR} All rights reserved.
    </div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

Я обнаружил, что это может быть решено путем разрушения, поэтому footer.js может быть таким:

import React from 'react'
import style from './footer.css'
import { Link } from 'react-router-dom'
import  YEAR  from '../../config'

const { CURRENT_YEAR } = YEAR

const footer = () => (
    <div className={ style.right } >
        @NBA { CURRENT_YEAR } All rights reserved.
    </div>
)

Answer 3

Вы неправильно экспортировали переменную, вам нужно экспортировать ее как

const CURRENT_YEAR = ( new Date() ).getFullYear()

export default CURRENT_YEAR;

иначе CURRENT_YEAR в footer.js будет объект типа {CURRENT_YEAR: ( new Date() ).getFullYear()}

Answer 4

Не используйте export default с фигурными скобками. Просто export default:

export default CURRENT_YEAR;

Если обернуть его в фигурные скобки, он оценивается как:

export default {{ date: 6/12/2019 };

Что неверно.

Answer 5

Проблема в том, что вы оборачиваете свой экспорт в {}, который превращает CURRENT_YEAR в объект, который выглядит следующим образом:

{ CURRENT_YEAR: 2019 }

Просто экспортируйте это как:

export default CURRENT_YEAR 

Тогда CURRENT_YEAR может сохранить свое значение.