重構 - mapProps和withProps不更新道具

Question

我有一個容器，我想管理名冊排序順序，方向和性別過濾器。 我在下面的當前withProps代碼中嘗試了withProps和mapProps ，名單在withProps正確更新，但它沒有覆蓋Wrestlers組件中的現有名單

 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)