重構 - mapProps和withProps不更新道具

Question

我有一個容器，我想要管理名冊排序順序，方向和性別過濾器。我曾嘗試在低於當前withProps代碼都withProps和mapProps，名冊得到的withProps內正確地更新，但它不會覆蓋在摔跤組件的現有名冊

import { compose, withState, withProps, withHandlers } from "recompose" 
 
import { connect } from "react-redux" 
 
import sortBy from "lodash/sortBy" 
 

 

 
// container 
 
export default compose(
 
    withState("male", "toggleGender", true), 
 
    withState("sortByName", "toggleSortByName", true), 
 
    withState("order", "toggleOrder", true), 
 
    withHandlers({ 
 
    toggleGender: ({ toggleGender, male, }) =>() => toggleGender(!male), 
 
    toggleSortByName: ({ toggleSortByName, sortByName, }) =>() => 
 
     toggleSortByName(!sortByName), 
 
    toggleOrder: ({ toggleOrder, order, }) =>() => toggleOrder(!order), 
 
    }), 
 
    connect(state => ({ 
 
    roster: state.roster, 
 
    })), 
 
    withProps(props => { 
 
    const { roster, toggleOrder, male, sortByName, } = props 
 

 
    let newRoster = Object.assign([], roster) 
 

 
    newRoster = newRoster.filter(wrestler => wrestler.male === male) 
 

 
    if (toggleOrder) { 
 
     newRoster = newRoster.reverse() 
 
    } 
 

 
    newRoster = sortBy(newRoster, sortByName ? "name" : "points") 
 

 
    return { 
 
     roster: newRoster, 
 
     ...props, 
 
    } 
 
    }) 
 
)(Wrestlers)

Answer 1

好這很愚蠢，我需要改變退貨的順序，我還修復了一些其他未成年人

import { compose, withState, withProps, withHandlers } from "recompose" 
import { connect } from "react-redux" 
import sortBy from "lodash/sortBy" 

import Wrestlers from "./wrestlers" 

export default compose(
    withState("male", "toggleGender", true), 
    withState("sortByName", "toggleSortByName", true), 
    withState("order", "toggleOrder", true), 
    withHandlers({ 
    toggleGender: ({ toggleGender, male, }) =>() => toggleGender(!male), 
    toggleSortByName: ({ toggleSortByName, sortByName, }) =>() => 
     toggleSortByName(!sortByName), 
    toggleOrder: ({ toggleOrder, order, }) =>() => toggleOrder(!order), 
    }), 
    connect(state => ({ 
    roster: state.roster, 
    })), 
    withProps(props => { 
    const { roster, order, male, sortByName, } = props 

    let newRoster = Object.assign([], roster) 

    newRoster = newRoster.filter(wrestler => wrestler.male === male) 

    newRoster = sortBy(newRoster, sortByName ? "name" : "points") 

    if (order) { 
     newRoster = newRoster.reverse() 
    } 

    return { 
     ...props, 
     roster: newRoster, 
    } 
    }) 
)(Wrestlers)