Question

我目前正在尝试构建一个sortby函数，该函数需要根据alfabetical顺序对redux存储中的场所进行排序。可以在此处找到现场演示：http://tabbs-web-app.herokuapp.com/discover/home

粘贴箱

描述

不幸的是我无法将项目上传到codesandbox，因为它超过了沙盒的120个限制模块......

以下组件从API检索场所数组并将它们保存到redux存储中。该组件与redux存储连接，并具有以下redux函数来过滤数组：

const mapStateToProps = (state) => {
  return {
    venues: getFilteredVenues(state.venues, state.filters)
  };
};

const mapDispatchToProps = (dispatch) => ({
  startSetVenues: () => dispatch(startSetVenues())
});

Home.jsx

render() {
    return (
      <div>
        <SectionTitle
          title="Discover Nightlife with Tabbs."
          subTitle="Instant jaccess to your favorite nightclubs, lounge, bars and parties
        nationwide."
        />

        <VenueListFilter data={filterOptions} />
        <VenueList data={this.props.venues} />
      </div>
    );
  }

以下组件是子组件，需要来自连接组件的数据：

VenueList.jsx

render({ data } = this.props) {
    return (
      <div>
        <Grid container spacing={8}>
          {data.map((venue, key) => {
            return <VenueListItem key={key} venue={venue} />;
          })}
        </Grid>
      </div>
    );
  }

最后一个组件是单个场地行/对象/组件：

VenueListItem.jsx

<Grid item {...rest} className={classes.grid}>
    <ImageCard
      image="https://static.bab.la/pic/living/UK/going-out-dancing.jpg"
      cardTitle={venue.venue_name}
      cardSubtitle={venue.venue_description}
      content="test, abc, def"
    />
  </Grid>

我现在遇到的问题是什么？

根据alfabetical订单正确订购redux商店。 mapStateToProps函数在Home.jsx中使用正确的有序数组进行调用。但是..组件渲染功能没有被再次调用，因此VenueList不会收到新的道具/更新值。

其他信息

排序/选择器功能：

const getFilteredVenues = (venues, { sortBy }) => {
  return venues.sort((a, b) => {
    if (sortBy === "alfabetical") {
      return a.venue_name.toLowerCase() > b.venue_name.toLowerCase();
    } else {
      return 0;
    }
  });
};

Redux版本：^ 3.7.2
React版本：16.2.0

Answer 1

history进行了内部数组修改。只需复制一份。

sort

使用sortBy redux操作对redux store数组进行排序不会向组件发送新的props

粘贴箱

描述

我现在遇到的问题是什么？

其他信息

1 个答案: