javascript - 如何修复 'Objects are not valid as a React child (found: object with keys )'

Question

我想导出这个文件中的一个对象，配置文件:

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

cli 中没有错误，但 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);