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

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);

Answer 2

问题是您将导出文件包装在{}中，这会将CURRENT_YEAR变成了一个看起来像这样的对象：

{ CURRENT_YEAR: 2019 }

只需将其导出为：

export default CURRENT_YEAR

然后CURRENT_YEAR可以保留其值。

Answer 3

您没有正确导出变量，您需要像这样导出

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

export default CURRENT_YEAR;

footer.js中的其他CURRENT_YEAR将是像{CURRENT_YEAR: ( new Date() ).getFullYear()}这样的对象

Answer 4

不要在花括号中使用export default。只是export default：

export default CURRENT_YEAR;

如果将其包裹在花括号中，则其评估方式如下：

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

哪个无效。

Answer 5

我发现可以通过销毁来解决它，因此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>
)

如何解决“对象作为React子对象无效（找到：带键的对象）”

5 个答案: