Question

我有文章组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ArticleList from "../ArticlesListApp";

class Articles extends Component {
  render() {
    const { articleList } = this.props;
    return (
      <ArticleList list={articleList} />
    )
  }
}

function mapStateToProps(state) {
  return {
    articleList: state.articles
  };
}

export default connect(mapStateToProps)(Articles);

文章是带有对象的数组，我有一个按名称过滤的按钮。

我有这个动作的减速器：

import { articles } from '../Content/Content';

export default (articleList = articles, action) => {

  switch(action.type) {
    case 'FILTERS-NAME' : {
      console.log(articleList);
      return articleList.sort(filtersArea);

    }
    default :
      return articleList;
  }
}


function filtersArea(a, b) {
  if (a.name < b.name)
    return -1;
  if (a.name > b.name)
    return 1;
  return 0;
}

现在，如果我在点击过滤器btn之后在控制台中打印我的数组，我会得到一个新的排序数组。但它没有渲染。

我哪里错了？

Answer 1

你不能改变reducer上的状态对象。这是来自redux docs：

请注意：

我们不会改变国家。我们使用Object.assign（）创建一个副本。   Object.assign（state，{visibilityFilter：action.filter}）也是   错误：它会改变第一个参数。你必须提供一个空的   object作为第一个参数。您还可以启用对象传播   运营商建议改为编写{... state，... newState}。

所以你应该这样做：

 case 'FILTERS-NAME' : {
  let sortedList = [...articleList];
  return sortedList.sort(filtersArea);
}

过滤后渲染反应组分

1 个答案: