React類組件按鈕setState排序未按預期作業

import AuthorSidebar from "../SubPages/AuthorSidebar";
import ReactPaginate from 'react-paginate';
import { Card, Button } from 'react-bootstrap';

export default class Author extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            author: [],
            AuthorTempState: [],
            selectedPage: 0,
            Postsperpage: 4,
            PagesVisited: 0
        }
        this.handlePageClick = this.handlePageClick.bind(this);


    }

    async recievedData() {

        const res = await fetch(`https://api.quotable.io/authors?limit=30`);

        const data = await res.json();

        for (const element of data.results) {
            element.idfav = false;
        }


        data.results.sort((a, b) => (a._id > b._id) ? 1 : -1)

        this.setState({
            author: data.results,
            AuthorTempState: data.results
        });

    }



    componentDidMount() {


        if (localStorage.getItem('authors')) {
            this.setState({
                author: JSON.parse(localStorage.getItem('authors')),
                AuthorTempState: JSON.parse(localStorage.getItem('authors'))
            })
        } else {
            this.recievedData();
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.state.author !== prevState.author) {
            localStorage.setItem('authors', JSON.stringify(this.state.author))
        }


    }





    favBttn(Auth) {

        const filterData = this.state.AuthorTempState.filter(data => data._id !== Auth._id)

        Auth.idfav = true;

        const updateAuthor = [Auth, ...filterData];

        updateAuthor.sort((a, b) => (a._id > b._id) ? 1 : -1)

        this.setState({
            author: updateAuthor
        });

    }

    remfavBttn(Auth) {


        const filterData = this.state.AuthorTempState.filter(data => data._id !== Auth._id)

        Auth.idfav = false;

        const updateAuthor = [Auth, ...filterData]

        updateAuthor.sort((a, b) => (a._id > b._id) ? 1 : -1)

        this.setState({
            author: updateAuthor
        });

    }




    handlePageClick = (e) => {

        const SelectedPage = e.selected;
        const Offset = SelectedPage * this.state.Postsperpage;

        this.setState({
            selectedPage: SelectedPage,
            PagesVisited: Offset
        }, () => {
            this.recievedData();
        });
    };



    render() {



        const { author } = this.state;
        const PageCount = Math.ceil(author.length / this.state.Postsperpage);

        console.log(author)
        let sliced = author.slice(this.state.PagesVisited, this.state.PagesVisited   this.state.Postsperpage);

        return (

            <div className="AppWhole">
                <AuthorSidebar />
                <div className="App">
                    <div className="author">
                        {sliced.map(
                            (Author) => (
                                <div key={Author._id}>
                                    <Card style={{ margin: 20 }} border="dark" bg="light" text="grey">
                                        <Card.Body>
                                            <Card.Title>Name: {Author.name}
                                                {
                                                    (Author.idfav) ? (<Button size="sm" className='right' onClick={() => 
                                                        this.remfavBttn(Author)
                                                    }>Remove Favt.</Button >) : (<Button size="sm" className='right' onClick={() => 
                                                        this.favBttn(Author)
                                                    }>Add Favt.</Button >)
                                                }
                                            </Card.Title>
                                            <Card.Text>
                                                Bio: {Author.bio}
                                            </Card.Text>
                                        </Card.Body>
                                        <Card.Footer>Wiki: <a href='{Author.link}'>{Author.link}</a></Card.Footer>
                                    </Card>


                                </div>
                            ))}

                        <div >
                            <ReactPaginate
                                pageCount={PageCount}
                                onPageChange={this.handlePageClick}
                                previousLabel={"<<"}
                                nextLabel={">>"}
                                containerClassName={'paginationLinks'}
                                disabledClassName={'paginationDisabled'}
                                activeClassName={'paginationActive'}
                            />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

所以我的頁面是一個作者頁面，它在我從 API 獲取然后映射的每張卡片中顯示不同的作者及其詳細資訊。https://i.stack.imgur.com/QitTe.png

在每張卡片中，點擊后它會變為洗掉收藏夾。收藏的卡片使作者狀態的物件陣列中的 idfav 為真，如果不收藏則為假。還有一個第二頁顯示了所有最喜歡的作者。現在，在一張卡片上單擊一次以洗掉收藏夾，然后單擊另一張卡片也洗掉收藏夾后，前一張卡片會自動添加收藏夾。

請幫助我，我已經堅持了 2 周了。謝謝你。

uj5u.com熱心網友回復：

由于您需要在串列中就地更新單個物件，因此您可以這樣做非常簡單。

const bttn = (idfav) => Auth => this.setState({
  author: this.state.author.map(a => 
    a._id === Auth._id
      // When we find the auth to update, change its idfav
      ? {...a, idfav }
      : a
  });
const favBttn = bttn(true);
const remfavBttn = bttn(false);

或者，如果您更喜歡未干燥的版本：

function async favBttn(Auth) {
 this.setState({
  author: this.state.author.map(a => 
    a._id === Auth._id
      // When we find the auth to update, change its idfav
      ? {...a, idfav: true }
      : a
  });
}

function async favBttn(Auth) {
 this.setState({
  author: this.state.author.map(a => 
    a._id === Auth._id
      // When we find the auth to update, change its idfav
      ? {...a, idfav: false }
      : a
  });
}

標籤：反应 排序 本地存储 设置状态

上一篇：Python插入排序，對字串和int進行排序

下一篇：使用Navicat過濾MySQL資料庫中的多個id值