Arrays TypeError:this.state.PostsAtt.map不是函数-ReactJS
我正在使用react infinite scroll组件包创建一个无限卷轴。我的滚动正在工作，但我在向滚动内容添加更多数据的更新数组中遇到问题 注意：set.setState（{poststat:set.state.poststat.push（{data:doc.data（），id:doc.id}）}） 当我使用concat（）时，我可以完全添加项目，但是我不能在这些文章中使用任何我试图返回的函数 我在社区里找了一些特别的东西，但没有找到任何帮助Arrays TypeError:this.state.PostsAtt.map不是函数-ReactJS,arrays,reactjs,google-cloud-firestore,Arrays,Reactjs,Google Cloud Firestore,我正在使用react infinite scroll组件包创建一个无限卷轴。我的滚动正在工作，但我在向滚动内容添加更多数据的更新数组中遇到问题 注意：set.setState（{poststat:set.state.poststat.push（{data:doc.data（），id:doc.id}）}） 当我使用concat（）时，我可以完全添加项目，但是我不能在这些文章中使用任何我试图返回的函数 我在社区里找了一些特别的东西，但没有找到任何帮助 constructor(props) {
constructor(props) {
super(props);
this.state = {
PostsAtt: [],
}
this.InfScroll = this.InfScroll.bind(this);
this.getDocs = this.getDocs.bind(this);
componentDidMount() {
// get firestore docs;
this.getDocs();
}
InfScroll() {
let db = firebase.firestore()
let set = this;
let lastVisible;
var first = db.collection('newPost').orderBy("createdAt",'desc').limit(set.state.PostsAtt.length)
return first.get().then(function (documentSnapshots) {
lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
var next = db.collection('newPost').orderBy('createdAt','desc').startAfter(lastVisible).limit(3)
next.get().then(documentSnapshots => {
documentSnapshots.forEach( (doc) => {
set.setState( { PostsAtt: set.state.PostsAtt.push({ data: doc.data(), id: doc.id }) } );
});
});
})
}
getDocs() {
let db = firebase.firestore();
let set = this;
db.collection("newPost").orderBy('createdAt', 'desc').limit(3).onSnapshot( documentSnapshots => {
let PostsAtt = []
documentSnapshots.forEach( doc => {
PostsAtt.push({ data: doc.data(), id: doc.id });
});
set.setState({PostsAtt: PostsAtt});
});
}
<InfiniteScroll
dataLength={this.state.PostsAtt.length}
next={ this.InfScroll }
hasMore={true}
loader={<h4 style={{textAlign: 'center'}}>Loading...</h4>}
height={800}
hasChildren={true}
endMessage={
<p style={{ textAlign: "center" }}>
<b>Não há mais posts.</b>
</p>
} >
<div>
{this.state.PostsAtt.map( (data,index) => {
return (
<div className="viewPost-content">
{index}
<div className="viewPost-box" key={index}
width={{width: '600px'}} height={{height: '505px'}}
style={{
backgroundColor: data?.data?.colorBg,
backgroundImage: `url(${data?.data?.url_img})`,
color: 'White'
}}
>
<p> <Moment to={data?.data?.createdAt?.toDate().toString()} /> </p>
<h2 className="text-post"> {data?.data?.texto} </h2>
<div class="viewPost-icons">
<div style={{marginRight: '-5px', marginTop: '180px',
backgroundColor:'transparent'}}>
<Link to={`/Posts/${data?.id}`}>
<i class="fas fa-comment"
style={{textShadow : ' 2px 1px 1px #000000',color: 'White'}}>
</i>
</Link>
</div>
<div style={{marginLeft: '-15px', marginTop: '180px',
textShadow : '2px 1px 1px #000000'}}> {
data?.data?.comentarios.length}
</div>
<div style={{marginRight: '-5px', marginTop: '176px'}}>
<button id="bt-Posts" onClick={() =>
this.UplikeFunc(data?.id,data?.data?.likes)}
value={this.state.corDoLike}
style={{'color' :
data.data?.likes?.includes(firebase.auth().currentUser?.displayName) ? 'green' : 'white'}}>
<i class="fas fa-thumbs-up" style={{textShadow : ' 2px 1px 1px
#000000'}}></i>
</button>
</div>
<div style={{marginLeft: '-15px', marginTop: '180px',
textShadow : '2px 1px 1px #000000'}}> { data?.data?.likes?.length}
</div>
<div style={{marginRight: '-5px', marginTop: '176px'}}>
<button id="bt-Posts" onClick={() =>
this.UpdislikeFunc(data?.id,data.data?.dislikes)}
value={this.state.corDoDislike}
style={{color: data?.data?.DislikeColor}}
>
<i class="fas fa-thumbs-down" style={{textShadow : '2px 1px 1px
#000000'}}></i>
</button>
</div>
<div style={{marginLeft: '-15px', marginTop: '180px',
textShadow : '2px 1px 1px #000000'}}> { data?.data?.dislikes?.length}
</div>
</div>
</div>
</div>
)
})
}
</div>
</InfiniteScroll>
{this.state.poststat.map（（数据，索引）=>{
报税表（
{index}
{data？.data？.texto}
{
数据？.data？.comentarios.length}
this.UplikeFunc（data？.id，data？.data？.likes）}
值={this.state.corDoLike}
样式={{'color'：
data.data？.likes？.includes（firebase.auth（）.currentUser？.displayName）？“绿色”：“白色”}>
{data？.data？.likes？.length}
this.UpdislikeFunc（data？.id，data.data？.dislikes）}
值={this.state.corDoDislike}
style={{color:data？.data？.DislikeColor}
>
{data？.data？.dislikes？.length}
)
})
}
set.setState( { PostsAtt: set.state.PostsAtt.push({ data: doc.data(), id: doc.id }) } );
const newPosts = [...set.sta.PostsAtt, { data: doc.data(), id: doc.id }]
set.setState({ PostsAtt: newPosts });
我相信问题就在这里
set.setState( { PostsAtt: set.state.PostsAtt.push({ data: doc.data(), id: doc.id }) } );
const newPosts = [...set.sta.PostsAtt, { data: doc.data(), id: doc.id }]
set.setState({ PostsAtt: newPosts });
使用
set.state.poststat.pushInfScroll=（）=>{
设db=firebase.firestore（）；
设set=this；
让我们看得到；
var first=db
.收集（“新邮政”）
.orderBy（“createdAt”、“desc”）
.极限（设定状态后状态长度）；
首先返回.get（），然后返回（函数（documentSnapshots）{
lastVisible=documentSnapshots.docs[documentSnapshots.docs.length-1]；
var next=db
.收集（“新邮政”）
.orderBy（“createdAt”、“desc”）
.startAfter（最后可见）
.限额（3）；
next.get（）。然后（（documentSnapshots）=>{
常量postAttArr=[]；//{
push（{data:doc.data（），id:doc.id}）；
});
set.setState（prev=>（{poststat:[…prev.poststat，…posttarr]}））；//{/使用set.state.poststat.push
，可以改变状态。还可以在for循环内设置状态
使用setState回调方法设置状态，并确保在for循环之后追加数据和更新状态
像这样
InfScroll=（）=>{
设db=firebase.firestore（）；
设set=this；
让我们看得到；
var first=db
.收集（“新邮政”）
.orderBy（“createdAt”、“desc”）
.极限（设定状态后状态长度）；
首先返回.get（），然后返回（函数（documentSnapshots）{
lastVisible=documentSnapshots.docs[documentSnapshots.docs.length-1]；
var next=db
.收集（“新邮政”）
.orderBy（“createdAt”、“desc”）
.startAfter（最后可见）
.限额（3）；
next.get（）。然后（（documentSnapshots）=>{
常量postAttArr=[]；//{
push（{data:doc.data（），id:doc.id}）；
});
set.setState（prev=>（{poststat:[…prev.poststat，…posttarr]}））；//{////////，谢谢你，array.map的问题并不是一个函数，但是我仍然不能在这些返回的帖子中使用任何函数。InfScroll没有返回的帖子（）函数工作得很好，我可以执行tanned函数。谢谢你，array.map的问题不是一个函数已经解决了，但是我仍然不能在这些返回的帖子中使用任何函数。InfScroll（）没有返回的帖子函数工作正常，我可以执行tanned函数。感谢兄弟，infScroll（）返回的帖子没有收到对我的同类函数的更新。但是，infScroll（）未返回的帖子正常接收。感谢兄弟，infScroll（）返回的帖子没有收到对my like函数的更新。但是infScro未返回的帖子