Необработанный отказ (TypeError): невозможно прочитать свойство '' неопределенного при сравнении идентификатора - PullRequest
Новая
       2

Необработанный отказ (TypeError): невозможно прочитать свойство '' неопределенного при сравнении идентификатора

1 голос
/ 26 апреля 2019

Я пытаюсь получить счет, основанный на post.id, который равен action.id

 console.log(action.data.find((post) => post.id === action.id).Likes.length)

Однако я получаю это

НеобработанныйОтклонение (TypeError): Невозможно прочитать свойство 'Likes' из неопределенного

, но когда я изменяю его, например, 

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  
    }

Actions.js 

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

    }
}

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

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

1 Ответ

1 голос
/ 26 апреля 2019

Вы пытаетесь получить сообщение с идентификатором, который не существует.

Глядя на как работает .find, он вернет undefined, если ничего не найдено.

Поэтому, когда вы делаете action.data.find((post) => post.id === action.id), он не находит post с таким же идентификатором, как action, и возвращает undefined, и вы не можете получить Like из undefined.

Я рекомендую проверить это перед доступом к .Like 

let post = action.data.find((post) => post.id === action.id)
let likeLen = post ? post.Likes.length : somethingYouWant

Я знаю, что этот ответ не решает в точности вашу проблему, но показывает, в чем проблема и как ее решить, и я надеюсь, что вы сможете лучше понять, что происходит, и помочь вам с вашей проблемой.

...