我正在尝试将更新的喜欢计数传递给子组件PostList.js。
它被称为
myLikes={post.Likes.length} //就在这里
console.log(nextProps.myPosts)
使用更新的“喜欢”计数创建一个新的“喜欢”对象数组。我将如何将此更新反映到用户界面？
myLikes={post.Likes.length}获得“点赞”计数，但没有获得更新的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);
Navbar.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
}
答案 0 :(得分：0)
Post.js
System.Net.CookieContainer cookies = new System.Net.CookieContainer();
ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12;
HttpWebRequest req = (HttpWebRequest)WebRequest.Create("https://www.google.de/?hl=de");
req.Timeout = 5000;
req.ReadWriteTimeout = 5000;
req.ContinueTimeout = 5000; //
string proxy = ""; //non working proxy here
req.Proxy = new WebProxy(proxy.Split(':')[0], Convert.ToInt32(proxy.Split(':')[1]));
req.Method = "GET";
req.CookieContainer = cookies;
req.UserAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0";
req.Referer = "";
HttpWebResponse resp = (HttpWebResponse)req.GetResponse();
Console.WriteLine(resp.Content);
答案 1 :(得分：0)
如此看来，将PostList Component逻辑全部移至Posts.js似乎可以完成所需的操作。但是，最好保持逻辑分离，但是这种逻辑对现在来说还是不错的。
因此componentWillReceiveProps必须位于要进行更新的组件上。在这种情况下，我想在
上进行更新post.Likes.length
位于PostList.js组件上。但是，componentWillReceiveProps位于posts.js组件上。因此，我在Posts.js组件上移动了逻辑。
Posts.js
import React, {Component} from 'react';
import PostList from './PostList';
import Paper from '@material-ui/core/Paper';
import {connect} from 'react-redux';
import {withRouter, Redirect} from 'react-router-dom';
import {
DeletePost,
postLike,
UpdatePost,
EditChange,
getCount,
DisableButton
} from '../actions/';
import PostItem from './PostItem';
import {GetPosts} from '../actions/';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
},
wrapper: {
padding: '0px 60px'
}
}
class Posts extends Component {
state = {
posts: [],
title: '',
loading: true,
isEditing: false,
}
componentWillMount() {
this.props.GetPosts();
}
removePost = (id) => () => {
this.props.DeletePost(id);
}
onChange = (e) => {
e.preventDefault();
this.setState({title: e.target.value})
}
formEditing = (id) => () => {
this.props.EditChange(id);
}
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, loading: false}); // here we are updating the posts state if redux state has updated value of likes
}
}
render() {
const {loading} = this.state;
const {myPosts} = this.props
console.log(this.state.posts);
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>
{this.state.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>
</div>
);
}
}
const mapStateToProps = (state) => ({
isAuthenticated: state.user.isAuthenticated,
myPosts: state.post.posts, isEditingId:
state.post.isEditingId
})
const mapDispatchToProps = (dispatch, state) => ({
GetPosts: () => dispatch(GetPosts()),
// 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 withRouter(connect(mapStateToProps, mapDispatchToProps)(Posts));