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