Javascript 为什么我的书没有放在正确的书架上（React Redux）？

我正在创建一个图书跟踪应用程序，它通过ajax获取图书并将其组织到书架上，我有许多组件，但我有一个问题存在于两个组件之间，AllShelfs和BookShelf，我太困惑了，书架标题按书架数组中的正确顺序呈现，我的问题开始于我尝试在相应书架上排列书籍时，我需要shelfName来完成这项工作，我在mapStateToProps中筛选了我的书籍，但我最终发现书籍位于错误的书架上，当我在mapStateToProps中控制台登录shelfName时，我得到了这个订单

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

子组件

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

---

那么，这里的问题是什么，为什么不将没有按正确顺序记录的项目（如标题）搁置起来呢。

试试这个：我简化了一些代码，并将重点放在我们需要解决的主要问题上

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

这是演示：

---

如果要访问MapStateTops函数中传递的属性，请按此方式执行。有关详细信息，您可以在此处找到：

当您在mapstatetorops中筛选数组时，您的书籍arrray可能会与书架的排序不同。@misraX是的，这很明显，但为什么会发生这种情况？@Nguyễn Thanh Tú我想这里不是这样，我有一个reducer，它在发送“FETCH_books”操作后返回一个books对象数组，我正在尝试过滤这些书，以将它们发送到相应的位置shelf@SaherElgendy我提供了一个工作示例的答案。意外行为来自于您在mapStateToProps函数中检索shelfName属性值的方式。正如我所说，book数组的排序不同，这导致MapStateTops中过滤数据的排序数组不同。如果你想匹配你的数组，试着先对你的book数组排序。这样做有效，你的解决方案也让我的代码git去掉了全局变量。但是你知道为什么我的代码返回了错误的顺序吗？？？@Nguyễn Thanh Tú