[英].map is not a function with react functional component
我正在尝试将类组件转换为功能组件,基本上使用我声明的虚拟数据显示所有带有映射功能的 nft。 谁能指导我完成这个。 我一直收到这个错误。
TypeError: nfts.map 不是函数响应式 src/components/components/ColumnNew.js:256
import React, { Component,useState,useEffect } from "react";
import Clock from "./Clock";
const Responsive = () => {
let dummyData = [{
deadline:"December, 30, 2021",
authorLink: "ItemDetail",
nftLink: "ItemDetail",
bidLink: "ItemDetail",
authorImg: "./img/author/author-1.jpg",
previewImg: "./img/items/static-1.jpg",
title: "Pinky Ocean",
price: "0.08 ETH",
bid: "1/20",
likes: 50
},
{
deadline:"",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-10.jpg",
previewImg: "./img/items/static-2.jpg",
title: "Deep Sea Phantasy",
price: "0.06 ETH",
bid: "1/22",
likes: 80
},
{
deadline:"",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-11.jpg",
previewImg: "./img/items/static-3.jpg",
title: "Rainbow Style",
price: "0.05 ETH",
bid: "1/11",
likes: 97
},
{
deadline:"January, 1, 2022",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-12.jpg",
previewImg: "./img/items/static-4.jpg",
title: "Two Tigers",
price: "0.08 ETH",
bid: "1/20",
likes: 50
},
{
deadline:"",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-9.jpg",
previewImg: "./img/items/anim-4.webp",
title: "The Truth",
price: "0.08 ETH",
bid: "1/20",
likes: 50
},
{
deadline:"January, 15, 2022",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-2.jpg",
previewImg: "./img/items/anim-2.webp",
title: "Running Puppets",
price: "0.08 ETH",
bid: "1/20",
likes: 50
},
{
deadline:"",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-3.jpg",
previewImg: "./img/items/anim-1.webp",
title: "USA Wordmation",
price: "0.08 ETH",
bid: "1/20",
likes: 50
},
{
deadline:"",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-4.jpg",
previewImg: "./img/items/anim-5.webp",
title: "Loop Donut",
price: "0.08 ETH",
bid: "1/20",
likes: 50
},
{
deadline:"January, 3, 2022",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-5.jpg",
previewImg: "./img/items/anim-3.webp",
title: "Lady Copter",
price: "0.08 ETH",
bid: "1/20",
likes: 50
},
{
deadline:"",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-7.jpg",
previewImg: "./img/items/static-5.jpg",
title: "Purple Planet",
price: "0.08 ETH",
bid: "1/20",
likes: 50
},
{
deadline:"",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-6.jpg",
previewImg: "./img/items/anim-6.webp",
title: "Oh Yeah!",
price: "0.08 ETH",
bid: "1/20",
likes: 50
},
{
deadline:"January, 10, 2022",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-8.jpg",
previewImg: "./img/items/anim-7.webp",
title: "This is Our Story",
price: "0.08 ETH",
bid: "1/20",
likes: 50
},
{
deadline:"",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-9.jpg",
previewImg: "./img/items/static-6.jpg",
title: "Pixel World",
price: "0.08 ETH",
bid: "1/20",
likes: 50
},
{
deadline:"January, 10, 2022",
authorLink: "#",
nftLink: "#",
bidLink: "#",
authorImg: "./img/author/author-12.jpg",
previewImg: "./img/items/anim-8.webp",
title: "I Believe I Can Fly",
price: "0.08 ETH",
bid: "1/20",
likes: 50
}]
const [nfts, setnfts] = useState(0)
const [height,setheight ] = useState(0)
setnfts(dummyData.slice(0,8))
// constructor(props) {
// super(props);
// this.state = {
// nfts: this.dummyData.slice(0,8),
// height: 0,
// };
// this.onImgLoad = this.onImgLoad.bind(this);
// }
const loadMore = () => {
let nftState = nfts
let start = nftState.length
let end = nftState.length+4
this.setState({
nfts: [...nftState, ...(this.dummyData.slice(start, end))]
});
setnfts({...nftState,...(this.dummyData.slice(start, end)) })
}
function onImgLoad({target:img}) {
let currentHeight = height;
if(currentHeight < img.offsetHeight) {
// this.setState({
// height: img.offsetHeight
// })
setheight(img.offsetHeight)
}
}
return (
<div className='row'>
{nfts.map( (nft, index) => (
<div key={index} className="d-item col-lg-3 col-md-6 col-sm-6 col-xs-12 mb-4">
<div className="nft__item m-0">
{ nft.deadline &&
<div className="de_countdown">
<Clock deadline={nft.deadline} />
</div>
}
<div className="author_list_pp">
<span onClick={()=> window.open(nft.authorLink, "_self")}>
<img className="lazy" src={nft.authorImg} alt=""/>
<i className="fa fa-check"></i>
</span>
</div>
<div className="nft__item_wrap" style={{height: `${height}px`}}>
<span>
<img onLoad={this.onImgLoad} src={nft.previewImg} className="lazy nft__item_preview" alt=""/>
</span>
</div>
<div className="nft__item_info">
<span onClick={()=> window.open(nft.nftLink, "_self")}>
<h4>{nft.title}</h4>
</span>
<div className="nft__item_price">
{nft.price}<span>{nft.bid}</span>
</div>
<div className="nft__item_action">
<span onClick={()=> window.open(nft.bidLink, "_self")}>Place a bid</span>
</div>
<div className="nft__item_like">
<i className="fa fa-heart"></i><span>{nft.likes}</span>
</div>
</div>
</div>
</div>
))}
{ nfts.length !== dummyData.length &&
<div className='col-lg-12'>
<div className="spacer-single"></div>
<span onClick={() => loadMore()} className="btn-main lead m-auto">Load More</span>
</div>
}
</div>
);
}
export default Responsive;
发生错误是因为您将nfts
初始化为零,并且您无法map
整数。
const [nfts, setnfts] = useState(0);
而是将其设置为空数组。
const [nfts, setnfts] = useState([]);
并且您应该将您的setnfts
调用移到useEffect
挂钩内,否则您将获得该组件的循环渲染和堆栈错误。 空依赖数组确保效果只运行一次。
useEffect(() => {
setnfts(dummyData);
}, []);
React 状态变量nfts
在第一次加载时被初始化为0
。
const [nfts, setnfts] = useState(0);
0
不是有效的数组对象。 您应该将 state 初始化为一个空数组, []
并在useEffect
中加载数据。 您也可以在使用useState
声明状态时初始化数据。
const [nfts, setnfts] = useState(dummyData.slice(0,8))
或者
const [nfts, setnfts] = useState([]);
useEffect(() => {
setnfts(dummyData.slice(0,8))
}, []);
作为一种防御性编程技术,您还可以进行一些null
检查 -
{nfts && nfts.length > 0 && nfts.map ... }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.