Как отобразить вложенный массив в сопоставленный массив в редуктор

Question

TLDR: Как мне лучше отобразить массив в подпорке initalState

Следующий код, который я пытаюсь попробовать, - это извлечь все postIds из аналогичного массива и сравнить *От 1006 * до like.postId

Однако

like.postId не определено.

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

Причина, по которой мне нужно было бы установить значения в подобии initialState, заключается в том, что мне нужно было бы использовать это следующее действие для добавления сообщений

  case ADD_LIKE:
        // console.log(action.id) // renders post id which is 2
        // console.log(state.posts) // logs posts array
        // console.log(state.posts)
            return {
            ...state,
            likes: state.likes + 1
        };

, если я сделаю что-то подобное like[0].postId он получит значения только для этого like.id.Мне нужно иметь возможность получить все лайки из всех постов, сравнить like.postId с post.id и затем установить значение.

И получить счет как

{this.props.likes}

, просто чтобы понять, как выглядит массив.

Это пример массива posts, ивнутри массива сообщений у вас есть массив лайков.

Вот как я называю сообщения

export const GetPosts = () => {
    return (dispatch, getState) => {
        return Axios.get('/api/posts/myPosts')
            .then( (res) => {
                 const data = res.data
                 const likes = res.data // gets  the first item within array, and shows likes.
                 const myLikes = likes.map( (post) => {
                    return post.Likes
                 })
                 console.log(myLikes)

                 dispatch({type: GET_POSTS, data, myLikes})
             })

    }
}

редуктор

export default (state = initialState, action) => {
    switch (action.type) {
     case GET_POSTS:
            console.log(action.data[0].Likes.length)
            return {
                ...state, 
                posts: action.data, // maps posts fine
                // set likes to but it only gets the first post, when it should get all posts
                likes: action.data.map( (post) => {
                    action.myLikes.map( (like) => {
                        // if(post.id === like.postId){
                            console.log(like) // renders an array of likes for all posts
                            console.log(like.postId) // renders undefined, 
                        // }
                    })
                })
        }
}

это то, как его отображают

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                     
                             myTitle={this.state.title} 
                             editChange={this.onChange} 
                             editForm={this.formEditing} 
                             isEditing={this.props.isEditingId === post.id} 
                             removePost={this.removePost} 
                             {...post} 
                        />
                    </Paper>
                ))}
            </div>
        )
    }

В этом компоненте вызывается действие GetPosts

class Posts extends Component {
  state = {
    posts: [],
    loading: true,
    isEditing: false, 
  }
  async componentWillMount(){
    await this.props.GetPosts();
    this.setState({ loading: false })
    const reduxPosts = this.props.myPosts;
    const ourPosts = reduxPosts  
    console.log(reduxPosts); // shows posts line 35
  }

  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={myPosts}/>
      </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));

Answer 1

Когда вы используете Array.map () , он создаст новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве, так что вы получитемассив массивов (массив массива лайков каждого поста), чтобы решить вашу проблему и получить массив лайков, вам нужно использовать функцию редуктора следующим образом:

export const GetPosts = () => {
return (dispatch, getState) => {
    return Axios.get('/api/posts/myPosts')
        .then( (res) => {
             const data = res.data
             const likes = res.data // gets  the first item within array, and shows likes.
             const myLikes = likes.reduce( (acc,post) => {
                    return acc.concat(post.Likes)
                 },[])
             console.log(myLikes)

             dispatch({type: GET_POSTS, data, myLikes})
         })
}}