Question

我是Redux的新手，并且对React总体上不称职。抱歉，这是一个愚蠢的问题。

我有一个简单的数据表。我单击标题和数据处于已排序状态，但此更改未显示在页面上。数据仅显示一次，不会重新呈现。

身体

let OurBody = ({ filteredArr }) => {

  return (
    <tbody>
      {filteredArr.map(element =>
        <tr key={element._id}>
          <td>{element.company}</td>
          <td>{element.balance}</td>
          <td>{element.registered}</td>
          <td>{element.address.country}</td>
          <td>{element.employers.length}</td>
          <td>--</td>
        </tr>
      )}
    </tbody>
  )
}

const mapStateToProps = (state) => {
  return {
    filteredArr: getSortedCompanies(state.json, state.sortCompany)
  };
}

export default connect(mapStateToProps)(OurBody);

标题

let Headersort = ({ dispatch }) => (
	<thead>
		<tr>
			<td onClick={() => {dispatch(sortCompany());}}>Company</td>
			<td>Balance</td>
			<td>Registered</td>
			<td>Country</td>
			<td>Number of employers</td>
			<td>Show employers</td>
		</tr>
	</thead>
);

const mapStateToProps = (state) => ({
	Arr: state.json,
  })

export default connect(mapStateToProps)(Headersort);

应用组件

class App extends React.Component {

  componentDidMount() {
    this.props.dispatch(fetchPosts());
  }

  render() {
    const { loading, error } = this.props;

    if (error) {
      return <div>Error! {error.message}</div>;
    }
  
    if (loading) {
      return <div>Loading...</div>;
    }

    return (
    <div>
      <table>
        <Headersort />
        <OurBody />
      </table>
    </div>
    )
  }
}
  
const mapStateToProps = state => ({
  loading: state.loading,
  error: state.error
})

App = connect(mapStateToProps)(App)
  
export default App;

减速器正常工作。每次我在商店更改时单击数据。没有显示错误。

github https://github.com/DrGreenNow/React-Redux-Table上的代码

Answer 1

由于您正在使用sort对数据进行排序，因此它将对原始引用的数据进行排序，并且在更新时，mapStateToProps返回的数据具有相同的引用。现在，当connect接受来自mapStateToProps的数据时，它不会触发重新渲染，因为根据它，数据没有更改。

在排序时克隆数据。

//getSortedCompanies

export default (json, sortCompany) => {
  if (sortCompany === null) {
    console.log(sortCompany);
    return json;
  } else if (sortCompany) {
    console.log(sortCompany);
    return [...json].sort((a, b) => {
      if (a.company.toLowerCase() < b.company.toLowerCase()) {
        return 1;
      } else {
        return -1;
      }
    });
  } else {
    return [...json].sort((a, b) => {
      if (a.company.toLowerCase() > b.company.toLowerCase()) {
        return 1;
      } else {
        return -1;
      }
    });
  }
};

WOrking demo

React-Redux。 Redux状态更改，但页面上未刷新数据

1 个答案: