Question

我正在尝试获取喜欢的帖子，并将其作为道具传递给redux。

所以我可以像使用它

myLikes={this.props.myLikes}呈现Likes 6或任何计数数字

{this.getLikes(post.Likes)} // retrieves like counts

但是我收到此警告

在现有状态转换期间（例如在 render）。渲染方法应该是props和状态。

我的目标是检索喜欢的人并将其映射回其受人尊敬的帖子。

我应该使用哪种方法，或者我在球场的某个地方？现在所有即时通讯都得到像这样的重复值的原因

Duplicate values shown here

这是代码

PostList.js

    getLikes = (count) =>  {

        this.props.getCount(count)      

    }
    render(){
        const {posts} = this.props;
        return (
            <div>
                {posts.map((post, i) => (

                    <Paper key={post.id} style={Styles.myPaper}>
                             {this.getLikes(post.Likes)}
                    {/* {...post} prevents us from writing all of the properties out */}
                        <PostItem  
                             myLikes={this.props.myLikes}                 
                             myTitle={this.state.title} 
                             editChange={this.onChange} 
                             editForm={this.formEditing} 
                             isEditing={this.props.isEditingId === post.id} 
                             removePost={this.removePost} 
                             {...post} 
                        />
                    </Paper>
                ))}
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    isEditingId: state.post.isEditingId,
    myLikes: state.post.likes
})

export default connect(mapStateToProps, mapDispatchToProps)(PostList);

Actions.js

export const getCount = (count) => {
    return (dispatch) => {
       dispatch({type: GET_LIKES_COUNT, count})
    }  
}

export const GetPosts = () => {
    return (dispatch, getState) => {
        return Axios.get('/api/posts/myPosts')
            .then( (res) => {
                 const data = res.data       
                 dispatch({type: GET_POSTS, data})
             })

    }
}

减速器

const initialState = {
    post: [],
    postError: null,
    posts:[],
    isEditing:false,
    isEditingId:null,
    likes:[],
    someLike:[],
    postId:null
}

export default (state = initialState, action) => {
    switch (action.type) {

    case GET_POSTS:
         return {
             ...state, 
          posts: action.data, // maps posts fine
        }
    case GET_LIKES_COUNT:
        console.log(action.count) 
        return({
            ...state,
            likes: action.count.length
        })

Posts.js

import React, { Component } from 'react';
import PostList from './PostList';
import {connect} from 'react-redux';
import { withRouter, Redirect} from 'react-router-dom';
import {GetPosts} from '../actions/';
const Styles = {
    myPaper:{
      margin: '20px 0px',
      padding:'20px'
    }
    , 
    wrapper:{
      padding:'0px 60px'
    }
}
class Posts extends Component {
  state = {
    posts: [],
    loading: true,
    isEditing: false, 
  }
  async componentWillMount(){
    await this.props.GetPosts();

    const thesePosts = await this.props.myPosts
    const myPosts2 = await thesePosts
    this.setState({
      posts: myPosts2,
      loading:false
    })

    console.log(this.state.posts.Likes);
  }


  render() {
    const {loading} = this.state;
    const { myPosts} = this.props
    if (!this.props.isAuthenticated) {
      return (<Redirect to='/signIn' />);
    }
    if(loading){
      return "loading..."
    }
    return (
      <div className="App" style={Styles.wrapper}>
        <h1> Posts </h1>
        <PostList posts={this.state.posts}/>
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  isAuthenticated: state.user.isAuthenticated,
  myPosts: state.post.posts
})
const mapDispatchToProps = (dispatch, state) => ({
  GetPosts: () => dispatch( GetPosts())
});
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Posts));

PostItem.js

import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import moment from 'moment';
import Editable from './Editable';
import {connect} from 'react-redux';
import {UpdatePost, postLike, getCount} from '../actions/';
import Like from './Like';
import Axios from '../Axios';
const Styles = {
    myPaper: {
        margin: '20px 0px',
        padding: '20px'
    },
    button:{
        marginRight:'30px'
    }
}
class PostItem extends Component{
    constructor(props){
        super(props);
        this.state = {
            disabled: false,
            myId: 0,
            likes:0
        }
    }

    componentWillMount(){

    }
    onUpdate = (id, title) => () => {
        // we need the id so expres knows what post to update, and the title being that only editing the title. 
        if(this.props.myTitle !== null){
            const creds = {
                id, title
            }
            this.props.UpdatePost(creds); 
        }
    }

    render(){
        const {title, id, userId, removePost, createdAt, post_content, username, editForm, isEditing, editChange, myTitle, postUpdate, Likes, clickLike, myLikes} = this.props
        return(
            <div>
                   <Typography variant="h6" component="h3">
                   {/* if else teneray operator */}
                   {isEditing ? (
                          <Editable editField={myTitle ? myTitle : title} editChange={editChange}/>
                   ): (
                       <div>
                           {title}
                       </div>    
                   )}         
                   </Typography>
                   <Typography  component={'span'} variant={'body2'}>
                       {post_content}
                       <h5>by: {username} </h5>
                       {/*  component span cancels out the cant be a decedent of error */}
                       <Typography  component={'span'} variant={'body2'} color="textSecondary">{moment(createdAt).calendar()}</Typography>
                      {/* gets like counts */}
                       <Like like={id} likes={myLikes} /> 
                   </Typography>
                   {!isEditing ? (
                       <Button variant="outlined" type="submit" onClick={editForm(id)}>
                           Edit
                       </Button>
                   ):(     
                       // pass id, and myTitle which as we remember myTitle is the new value when updating the title
                        <div>
                            <Button 
                                disabled={myTitle.length <= 3}
                                variant="outlined" 
                                onClick={this.onUpdate(id, myTitle)}>
                                Update
                            </Button>
                            <Button 
                                variant="outlined" 
                                style={{marginLeft: '0.7%'}}
                                onClick={editForm(null)}>
                                Close
                            </Button>
                        </div>
                   )}
                   {!isEditing && (
                    <Button
                        style={{marginLeft: '0.7%'}}
                        variant="outlined"
                        color="primary"
                        type="submit"
                        onClick={removePost(id)}>
                        Remove
                    </Button>
                    )}
           </div>
       )
    }
}
const mapStateToProps = (state) => ({
    isEditingId: state.post.isEditingId,
    // myLikes: state.post.likes
})
const mapDispatchToProps = (dispatch) => ({
    // pass creds which can be called anything, but i just call it credentials but it should be called something more 
    // specific.
    UpdatePost: (creds) => dispatch(UpdatePost(creds)),
    postLike: (id) => dispatch( postLike(id)),

    // Pass id to the DeletePost functions.
});
export default connect(mapStateToProps, mapDispatchToProps)(PostItem);

action.count的值

值：6 值：0

Answer 1

您的问题是您正在更改render方法内部的状态。

{this.getLikes(post.Likes)}

这段代码导致您的reducer内部执行操作，然后更新状态。这就是redux的全部意义。

但是由于react不允许在渲染时更改状态，因此您会收到错误消息。当出现新状态，渲染尚未完成并且新状态再次触发渲染时，最终将导致无限循环。

您要执行的操作是将this.state.likes放在this.getLikes(post.Likes)的位置，然后在componentDidMount内调用后者。这样render可以完成而不会被中断。在第一次调用render时，必须确保this.state.likes具有有效值（例如null），在第二次渲染时，this.state.likes将具有操作值您用this.getLikes(post.Likes)触发。

例如：

render（带有this.state.likes = null）
componentDidMount被呼叫
redux操作
this.state.likes更改
render（带有this.state.likes = 6）

阅读docs，了解有关生命周期方法的详细信息。

获取计数时，无法在现有状态转换期间更新

1 个答案: