reactjs - 如何将 nextProps 传递给子组件

问题描述

我正在尝试将更新后的点赞数传递给子组件PostList.js。

它被称为

myLikes={post.Likes.length}// 就在这儿

这console.log(nextProps.myPosts)

使用更新后的 Likes 计数创建一个新的 likes 对象数组。我将如何将此更新反映到 UI 上？

myLikes={post.Likes.length} 获取 Likes 计数，但不获取更新的 nextProps。

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, 
    // likes:[]
  }
  componentWillMount(){
     this.props.GetPosts();

    this.setState({
      loading:false
    })

  }
  componentWillReceiveProps(nextProps, prevState) {
    let hasNewLike = true ;
    if(prevState.posts && prevState.posts.length) {
      for(let index=0; index < nextProps.myPosts.length; index++) {
        if(nextProps.myPosts[index].Likes.length !== 
          prevState.posts[index].Likes.length) {
            hasNewLike = true;

         }
    }
  }
  if(hasNewLike) {
   this.setState({posts: nextProps.myPosts});  // here we are updating the posts state if redux state has updated value of likes
  }
  console.log(nextProps.myPosts) 

  //  console.log(nextProps.myPosts[1].Likes.length) // shows a like count
 }

  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));

PostList.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 {connect} from 'react-redux';
import {DeletePost, postLike, UpdatePost,EditChange, getCount, DisableButton} from '../actions/';
import PostItem from './PostItem';
import _ from 'lodash';
const Styles = {
    myPaper: {
        margin: '20px 0px',
        padding: '20px'
    }
}
class PostList extends Component{
    constructor(props){
        super(props);
        this.state ={
            title: '',

        }
    } 
    // Return a new function. Otherwise the DeletePost action will be dispatch each
     // time the Component rerenders.
    removePost = (id) => () => {
        this.props.DeletePost(id);
    }

    onChange = (e) => {
        e.preventDefault();
        this.setState({
            title: e.target.value
        })
    }
    formEditing = (id) => ()=> {;
        this.props.EditChange(id);
    }



    render(){
        const {posts} = this.props;


        // console.log(this.props.ourLikes);
        return (
          <div>
            {posts.map(post => (

              <Paper key={post.id} style={Styles.myPaper}>
                <PostItem
                  myLikes={post.Likes.length} // right here
                  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,
})
const mapDispatchToProps = (dispatch) => ({
    // pass creds which can be called anything, but i just call it credentials but it should be called something more 
    // specific.
    EditChange: (id) => dispatch(EditChange(id)),
    UpdatePost: (creds) => dispatch(UpdatePost(creds)),
    postLike: (id) => dispatch( postLike(id)),
    // Pass id to the DeletePost functions.
    DeletePost: (id) => dispatch(DeletePost(id))
});
export default connect(mapStateToProps, mapDispatchToProps)(PostList);

导航栏.js

import React from 'react';
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import signUp from '../auth/signUp';
import signIn from '../auth/signIn';
import Post from '../Post';
import Forgot from '../account/Forgot';
import Home from '../Home';
import Posts from '../Posts';
import Users from '../account/Users';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import {withStyles} from '@material-ui/core';
import Dashboard from '../account/dashBoard';
import {connect} from 'react-redux';
import {createBrowserHistory} from 'history';
import PropTypes from 'prop-types';
import {compose} from 'redux';
import Axios from '../../Axios';
import updatePassword from '../account/updatePassword';
import ResetPassword from '../account/ResetPassword';
import ourStyles from '../../styles/ourStyles';
export const history = createBrowserHistory({forceRefresh: true});


const logout = (e) => {
    e.preventDefault()
    Axios.get(process.env.REACT_APP_LOGOUT, {withCredentials: true})
        .then(res => {
            // console.log(res);
            if (res.status === 200) {
                localStorage.removeItem('auth')
                localStorage.removeItem('myAuth')
                history.push('/')
            }
        })
        .catch(err => {
        //     // their will be an inevitable error, so you would need this for it to work
            localStorage.removeItem('auth')
             localStorage.removeItem('myAuth')
            history.push('/')
         })
}

const Navbar = ({classes, isAuthenticated}) => (

<Router history={history}>

        <div className={classes.navRoot}>

            <AppBar position="static" className={classes.navbar}>
                <Toolbar>

                    <Typography variant="h6" color="inherit">
                        Express Seqeuelize App
                    </Typography>

                    <Typography classcolor="inherit" className={classes.rightt}>

                        {!isAuthenticated && (

                            <Button>
                                <Link to="/" className={classes.rightToolbar}>
                                    Home
                                </Link>
                            </Button>

                        )}
                        {isAuthenticated && (
                            <Button>
                                <Link className={classes.rightToolbar} to="/posts">
                                    Posts
                                </Link>
                            </Button>

                        )}

                        {!isAuthenticated && (

                            <Button>
                                <Link to="/signUp" className={classes.rightToolbar}>
                                    Sign Up
                                </Link>
                            </Button>

                        )}

                        {!isAuthenticated && (

                            <Button>
                                <Link to="/signIn" className={classes.rightToolbar}>
                                    Sign In
                                </Link>
                            </Button>

                        )}

                        {isAuthenticated && (
                            <Button>
                                <Link className={classes.rightToolbar} to="/Post">
                                    New Post
                                </Link>
                            </Button>

                        )}

                        {isAuthenticated && (
                            <Button>
                                <Link to="/dashboard" className={classes.rightToolbar}>
                                    Dashboard
                                </Link>
                            </Button>

                        )}

                        {isAuthenticated && (
                            <Button onClick={logout}>

                                LogOut

                            </Button>
                        )}

                    </Typography>

                </Toolbar>
            </AppBar>
            <Switch>
            <Route exact path="/signUp" component={signUp}/>
            <Route exact path="/" component={Home}/>
            <Route exact path="/signIn" component={signIn}/>
            <Route exact path="/Post" component={Post}/>
            <Route exact path="/Posts" component={Posts}/>
            <Route path="/Forgot" component={Forgot}/>
            <Route path="/users" component={Users}/>
            <Route exact path="/logout"/>
            <Route exact path="/dashboard" component={Dashboard}/>
            <Route path="/test"/>
            <Route path="/reset/:token" component={ResetPassword}/>
            <Route exact path="/updatePassword/:username" component={updatePassword}/>
            </Switch>
        </div>
 </Router>

);

const mapStateToProps = (state) => ({
    token: state.user.getToken, githubAuth: state.user.githubAuth,
    // owl: state.user.owl,
    isAuthenticated: state.user.isAuthenticated
})

const mapDispatchToProps = (dispatch) => ({
    //   logIn: (user) => dispatch(logIn(user))

});

Navbar.propTypes = {
    isAuthenticatd: PropTypes.string

}

// export default withStyles(styles)(Navbar);
export default compose(connect(mapStateToProps, mapDispatchToProps), withStyles(ourStyles))(Navbar);

减速器

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

export default (state = initialState, action) => {
    switch (action.type) {
    case ADD_LIKE:
        const newState = {...state};  // here I am trying to shallow  copy the existing state;
        const existingLikesOfPost = newState.posts.find(post => post.id == action.id).Likes;
        newState.posts.find(post => post.id == action.id).Likes = [...existingLikesOfPost, action.newLikeObject]; 
        console.log(newState)
        return newState

console.log(newState)

{
  "post": [],
  "postError": null,
  "posts": [
    {
      "id": 5,
      "title": "React estiossssnsdd",
      "post_content": "ssss",
      "username": "owlman",
      "createdAt": "2019-04-26T09:38:10.324Z",
      "updatedAt": "2019-04-27T20:53:16.898Z",
      "userId": 1,
      "Likes": [
        {
          "id": 236,
          "like": true,
          "createdAt": "2019-04-27T20:57:44.395Z",
          "updatedAt": "2019-04-27T20:57:44.395Z",
          "userId": 1,
          "postId": 5
        },
        {
          "id": 220,
          "like": true,
          "createdAt": "2019-04-27T15:57:29.753Z",
          "updatedAt": "2019-04-27T15:57:29.753Z",
          "userId": 1,
          "postId": 5
        },

  "isEditing": false,
  "isEditingId": null,
  "likes": [
    117,
    39
  ],
  "someLike": [],
  "postId": null
}

标签： reactjsreduxreact-redux

reactjs - 如何将 nextProps 传递给子组件

问题描述

解决方案

推荐阅读