调用动作时的无限后期循环 [英] infinite post loop when calling action

问题描述

这不是一个特定的错误，我在调用函数时遇到了一个无限的 post 循环

getLikes = (id) =>{//console.log(id);this.props.getLikeCount(id)console.log(this.props.likeCount)}

视觉上是这样的

这是一个无限循环.我们重构了代码，以便用户可以为帖子添加赞、检索特定帖子的赞数量以及更新赞的状态.

Like.js

import React, { Component } from 'react';从'react-dom' 导入 ReactDOM从'@fortawesome/react-fontawesome'导入{FontAwesomeIcon}；从@fortawesome/free-solid-svg-icons"导入 { faCoffee, faAdjust };从'react-redux'导入{connect}；import { getLikeCount} from '../actions/';类像扩展组件{构造函数(道具){超级(道具)；this.state = {喜欢:空}}getLikes = (id) =>{//console.log(id);this.props.getLikeCount(id)console.log(this.props.likeCount)}使成为(){返回(<div style={{float:'right', fontSize:'1.5em', color:'tomato'}} ><i style={{ marginRight: '140px'}} className="fa fa-heart-o"><span style={{ marginLeft: '6px'}}><a href="#" onClick={this.props.like}>赞 </a>{this.getLikes(this.props.postId)}</span>{/* 获得点赞数 */}{this.props.likeCount}</i>

)}}const mapStateToProps = (状态) =>({isEditingId: state.post.isEditingId,喜欢计数:state.post.likes})const mapDispatchToProps = (调度) =>({getLikeCount: (id) =>调度(getLikeCount(id))，//将 id 传递给 DeletePost 函数.});导出默认连接(mapStateToProps, mapDispatchToProps)(Like);

Actions.js

export const postLike = (id) =>{返回(调度)=>{//console.log(userId);return Axios.post('/api/posts/like', {postId: id}).then( (喜欢) => {调度({类型:ADD_LIKE})//console.log('你喜欢这个', like)}).catch((错误)=>{console.log('好像有错误', err);})}}export const getLikeCount = (id) =>{返回(调度，getState)=>{return Axios.get(`/api/posts/likes/count/${id}`).then( (res) => {常量数据 = res.data控制台日志(数据)；//记录数据，我可以看到一个数组调度({类型:GET_LIKES_COUNT，数据})})}}

减速器

import { ADD_LIKE, GET_LIKES_COUNT} from '../actions/';常量初始状态 = {喜欢:0,}导出默认值(状态 = 初始状态，动作)=>{开关(动作.类型){案例 GET_LIKES_COUNT://console.log(action.data)返回({...状态，喜欢:action.data})案例ADD_LIKE:返回({...状态，喜欢:state.likes + 1})默认:返回状态}}

PostList.js

import React, { Component } from 'react';从'@material-ui/core/Paper' 导入纸张；从@material-ui/core/Button"导入按钮；从@material-ui/core/Typography"导入排版；从时刻"导入时刻；从'react-redux'导入{connect}；导入 {DeletePost, getLikeCount, postLike, UpdatePost,EditChange, DisableButton} from '../actions/';从 './PostItem' 导入 PostItem；常量样式 = {我的论文:{边距:'20px 0px'，填充:'20px'}}类 PostList 扩展组件{构造函数(道具){超级(道具)；this.state ={标题: ''，}}//返回一个新函数.否则 DeletePost 操作将被分派每个//组件重新渲染的时间.removePost = (id) =>() =>{this.props.DeletePost(id);}onChange = (e) =>{e.preventDefault();this.setState({标题:e.target.value})}clickLike = (id) =>{this.props.postLike(id);}表单编辑 = (id) =>()=>{;this.props.EditChange(id);}使成为(){const {posts} = this.props;返回 (<div>{posts.map((post, i) => (<Paper key={post.id} style={Styles.myPaper}>{/* {...post} 阻止我们写出所有的属性 */}<发布项目clickLike={this.clickLike(post.id)}myTitle={this.state.title}editChange={this.onChange}editForm={this.formEditing}isEditing={this.props.isEditingId === post.id}removePost={this.removePost}{...邮政}/></纸>))}

)}}const mapStateToProps = (状态) =>({isEditingId: state.post.isEditingId,})const mapDispatchToProps = (调度) =>({//传递可以被称为任何东西的凭据，但我只是称它为凭据，但它应该被称为更多的东西//具体的.EditChange: (id) =>调度(EditChange(id))，更新帖子:(信用)=>dispatch(UpdatePost(creds)),getLikeCount: (id) =>调度(getLikeCount(id))，postLike: (id) =>调度(postLike(id))，//将 id 传递给 DeletePost 函数.DeletePost: (id) =>调度(DeletePost(id))});导出默认连接(mapStateToProps，mapDispatchToProps)(PostList)；

PostItem.js

import React, { Component } from 'react';从'@material-ui/core/Paper' 导入纸张；从@material-ui/core/Button"导入按钮；从@material-ui/core/Typography"导入排版；从时刻"导入时刻；从'./Editable'导入可编辑；从'react-redux'导入{connect}；导入 {UpdatePost, getLikeCount, postLike} from '../actions/';从'./Like'导入喜欢；从 '../Axios' 导入 Axios；常量样式 = {我的论文:{边距:'20px 0px'，填充:'20px'},按钮:{marginRight:'30px'}}类 PostItem 扩展组件{构造函数(道具){超级(道具)；this.state = {禁用:假，}}onUpdate = (id, title) =>() =>{//我们需要 id 以便 express 知道要更新什么帖子，而标题只是编辑标题.if(this.props.myTitle !== null){const 信用 = {身份证，标题}this.props.UpdatePost(creds);}}使成为(){const {title, id, userId, removePost, createdAt, post_content, username, editForm, isEditing, editChange, myTitle, postUpdate, likes, clickLike} = this.props返回(<div><Typography variant="h6" component="h3">{/* if else teneray 运算符 */}{正在编辑?(<可编辑的 editField={myTitle ?myTitle : 标题} editChange={editChange}/>):(<div>{标题}

)}</排版><排版组件="p">{post_content}<h5>作者:{用户名}<Typography color="textSecondary">{moment(createdAt).calendar()}</Typography><Like like={clickLike} postId={id}/></排版>{!isEditing ?(<Button variant="outlined" type="submit" onClick={editForm(id)}>编辑</按钮>):(//传递 id 和 myTitle，我们记得 myTitle 是更新标题时的新值<div><按钮禁用={myTitle.length <= 3}变体=概述"onClick={this.onUpdate(id, myTitle)}>更新</按钮><按钮变体=概述"style={{marginLeft: '0.7%'}}onClick={editForm(null)}>关闭</按钮>

)}{!isEditing &&(<按钮style={{marginLeft: '0.7%'}}变体=概述"颜色=主要"类型=提交"onClick={removePost(id)}>去掉</按钮>)}