Getting error : "react-dom.production.min.js:216 TypeError: Object(...) is not a function" while deploying react app on github pages
Getting error : "react-dom.production.min.js:216 TypeError: Object(...) is not a function" while deploying react app on github pages
我正在尝试部署我的 React 应用程序,但它没有正确呈现页面,它抛出以下错误:react-dom.production.min.js:216 TypeError: Object(...) 不是函数。
我已经 link 编辑了错误的屏幕截图和文件名以及我的 github link 回购协议。[![
Expense.js
import { useState } from "react";
import "../css/Expenses.css";
import Card from "./Card";
import ExpenseItem from "./ExpenseItem";
import Filter from "./Filter";
function Expenses(props){
let data = props.data;
let [year,changeYear] = useState("2021");
let data2 = data.filter(function(item){
return(new Date(item.dates).getFullYear().toString() === year);
})
let setFilter = function(yearValue){
changeYear(yearValue);
}
return(
<Card className = "card">
<div className="filter-section">
<h3>Filter By Year</h3>
<Filter sendData={setFilter} yearVal = {year} className='year-filter-card'/>
</div>
<div className="expense-wrap">
{data2.length?
data2.map(function(expItem) {
return <ExpenseItem key={Math.random()*100000} item= {expItem} deleteMe={props.deleteMe}/>
}):
<h2 className="nodata">No Expense Data</h2>
}
</div>
</Card>
);
}
export default Expenses;
问题已解决,现在必须使用此行:
import React,{ useState } from "react";
我正在尝试部署我的 React 应用程序,但它没有正确呈现页面,它抛出以下错误:react-dom.production.min.js:216 TypeError: Object(...) 不是函数。
我已经 link 编辑了错误的屏幕截图和文件名以及我的 github link 回购协议。[![
Expense.js
import { useState } from "react";
import "../css/Expenses.css";
import Card from "./Card";
import ExpenseItem from "./ExpenseItem";
import Filter from "./Filter";
function Expenses(props){
let data = props.data;
let [year,changeYear] = useState("2021");
let data2 = data.filter(function(item){
return(new Date(item.dates).getFullYear().toString() === year);
})
let setFilter = function(yearValue){
changeYear(yearValue);
}
return(
<Card className = "card">
<div className="filter-section">
<h3>Filter By Year</h3>
<Filter sendData={setFilter} yearVal = {year} className='year-filter-card'/>
</div>
<div className="expense-wrap">
{data2.length?
data2.map(function(expItem) {
return <ExpenseItem key={Math.random()*100000} item= {expItem} deleteMe={props.deleteMe}/>
}):
<h2 className="nodata">No Expense Data</h2>
}
</div>
</Card>
);
}
export default Expenses;
问题已解决,现在必须使用此行:
import React,{ useState } from "react";