javascript - 重构 - mapProps 和 withProps 不更新道具

Question

我有一个容器，我想管理名册排序顺序、方向和性别过滤器。我已经尝试了这两种方法withProps，并且mapProps在下面的当前withProps代码中，名册在 内部正确更新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)