在react中导入数据

mgdq6dx1  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(349)

我正在尝试从文件导入数据 dateUpdated.js 变成 Header.js 归档。
我犯了一个错误 TypeError: Object is not a function or its return value is not iterable ,但我以前见过这样做的。

let dateUpdated = {
        "date": [
            {
                "date": "7/10/2021"
            }
        ]

    }
import React, {setState} from "react"
import dateUpdated from "../data/dateUpdated"

function Header() {
    const [date, setDate] = setState(dateUpdated)

    return (
        <div>
            <h1></h1>
            <p></p>
        </div>
    )

}

export default Header
pjngdqdw

pjngdqdw1#

首先,您必须导出已更新的日期
其次,我认为您正在尝试使用usestate钩子。setstate用于基于类的组件,您可以在其中修改状态值。

// Header.js
import React, { useState } from "react";
import dateUpdated from "./data";

function Header() {
  const [date, setDate] = useState(dateUpdated);
  console.log(date);
  return (
    <div>
      <h1>Hello World</h1>
      <p></p>
    </div>
  );
}

export default Header;

// data.js

let dateUpdated = {
  date: [
    {
      date: "7/10/2021"
    }
  ]
};
export default dateUpdated;

我已经为你创建了沙盒,看看代码,你会明白的

r8xiu3jd

r8xiu3jd2#

您正在使用功能组件。尝试 useState 相反:

import React, {useState} from "react"
import dateUpdated from "../data/dateUpdated"

function Header() {
    const [date, setDate] = useState(dateUpdated)

    return (
        <div>
            <h1></h1>
            <p></p>
        </div>
    )

}

export default Header
``` `setState()` 用于类组件,而 `useState()` 用于功能组件
其次,您需要在dateupdated.js中导出。我经常这样做。该函数是相当冗余的,但我想我们通常必须在导出数据之前对其进行处理:

const Data = () => {
return [{"your data": "here"}]
}

export default Data;

然后 `import` 它:

import Data from "./data";

const data = Data();

现在你可以使用 `data` 在你的职责范围内。

相关问题