我试图获取一个基于post.id
的计数,该计数等于action.id
console.log(action.data.find((post) => post.id === action.id).Likes.length)
但当我改变它的时候
action.data.find((post) => post.id === 5).Likes.length) // 5 is an id of an existing post.
它按预期工作,但是它需要是动态的。
这是减速器
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:
console.log(action.data)
console.log(action.data.find((post) => post.id === action.id).Likes.length) // fetchs likes count according to post.id but needs to be dynamic
return {
...state,
posts: action.data, // maps posts fine,
likes: action.data.find((post) => post.id === action.id).Likes.length
// needs to be dynamic so i can multiple post.ids
}
export const GetPosts = () => {
return (dispatch, getState) => {
return Axios.get('/api/posts/myPosts')
.then( (res) => {
const data = res.data
const id = data.map( (post) => post.id) // gets posts id [5,3]
dispatch({type: GET_POSTS, data, id})
})
}
}
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));
postlist.js
render(){
const {posts} = this.props;
return (
<div>
{posts.map((post, i) => (
<Paper key={post.id} style={Styles.myPaper}>
{/* {...post} prevents us from writing all of the properties out */}
<PostItem
// or put this.state.likes in the myLikes prop
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>
)
}
}
您试图获取一个id不存在的帖子。
查看.find
的工作原理,如果没有找到任何东西,它将返回undefined
。
因此,当您执行action.data.find((post)=>post.id====action.id)
时,它找不到任何与action
具有相同id的post
,并且它返回undefined
,您也不能从undefined
中获得like
。
我建议在访问之前检查它。like
let post = action.data.find((post) => post.id === action.id)
let likeLen = post ? post.Likes.length : somethingYouWant
我知道这个答案不能解决你的问题,但它表明了问题是什么以及如何解决它,我希望你能更好地理解发生了什么,并帮助你解决你的问题。
为什么children.length导致未处理拒绝(TypeError):无法读取未定义的属性(读取'length'),特别是因为children.length的值已成功地显示在控制台上?
我知道在这个问题上有很多答案,比如这个。我确实在组件构造函数中添加了。我还尝试了胖箭头方法(),但是当我单击时,仍然会显示此错误:
我有一个简单的代码,但我收到(有时)错误的结果,这是因为nodejsasync,我知道。最后,我需要更新“this.setState({active:options})”。因此,为了解决NodeJS的异步问题,我使用了require(“异步”)库。但是现在我的简单代码变得相当复杂,结果也不是100%好。 同样在“函数道路”上,当我使用“this.setState({actove:options})
我在一个简单的post请求中收到错误“TypeError:无法读取未定义的属性'\u id',该请求将文档保存到名为的集合中,我的有效负载如下所示: 我只是在做
L.E:功能选择:
我试图创建一个post方法,以便将数据存储到mongoDb中,但是当我通过postman发送post请求时,出现了一个类型错误 我已经通过npm更新了软件包,但错误保持不变 类型错误:无法读取属性'Customer_id'的未定义在exports.create_customer(C:\用户\jawad\桌面\nodejspactise\控制器\admin.controll.js:64: 31)在L