Почему мои книги не расположены на правильных полках (React-Redux)?

Question

Я создаю приложение для отслеживания книг, которое выбирает книги с помощью ajax и упорядочивает их по полкам, у меня много компонентов, но у меня есть проблема, которая существует между двумя из них, AllShelves и BookShelf, я так запутался, названия полокотображается в правильном порядке, как в массиве полок, моя проблема начинается, когда я пытаюсь расположить книги на соответствующих полках, для этого мне нужно shelfName, я отфильтровал свои книги в mapStateToProps, но у меня закончились книги на неправильных полках, когда я утешаюзарегистрированное имя_файла в mapStateToProps Я получил этот заказ

//read
//currentlyReading
//wantToRead

вместо

//currentlyReading
//wantToRead
//read

и даже дублирован

Это мои компоненты

Первый компонент

import React, {Component} from 'react';
import BookShelf from './BookShelf'

const AllShelves = () => {

   const shelves = [
    {
      title: 'Currently Reading',
      shelfName: 'currentlyReading'
    },
    {
      title: 'Want to read',
      shelfName: 'wantToRead'
    }, 
    {
      title:'Read',
      shelfName: 'read'
    }
  ];

  return(
   <div>
    {shelves.map((shelf, index) => {
      return (
        <div className="shelf" key={index}>
          <h2>{shelf.title}</h2>
          <BookShelf 
            shelfName={shelf.shelfName}
          />
        </div>
      );
    })}
  </div>
 );
} 

export default AllShelves;

Дочерний компонент

import React, { Component } from 'react';
import Book from './Book'
import {connect } from 'react-redux';


let shelfName = '';

const BookShelf = (props) => {

  shelfName = props.shelfName;

  return(
    <div className="book-shelf">
       {props.books.map(book => (
          <Book 
            key={book.id}
            book={book}
          />
        ))}
    </div>
  );
 }

const mapStateToProps = state => {
  console.log(shelfName)//read
                        //currentlyReading
                        //wantToRead
  return {
    books: state.filter(book => book.shelf === shelfName)
 }
}

export default connect(mapStateToProps, null)(BookShelf);

Так в чем здесь проблема, почему бы не занести элементы shelfName в неправильном порядке, как заголовки.

Answer 1

Попробуйте: (Я упрощаю некоторые коды и сосредотачиваюсь на главной проблеме, которую нам нужно решить)

import React from "react";
import { connect } from "react-redux";

const BookShelf = props => {
  const shelfName = props.shelfName;
  return <div>{shelfName}</div>;
};
const mapStateToProps = (state, ownProps) => {
  console.log(ownProps.shelfName);
  return ({

  });
};
export default connect(mapStateToProps)(BookShelf);

Это демо: https://codesandbox.io/s/p5jr57vw8j

Если вы хотите получить доступ к переданным свойствам внутри функции mapStateToProps(), сделайте это следующим образом.Для получения дополнительной информации вы можете найти ее здесь: mapStateToProps (state, [ownProps]): stateProps