时间戳

首页 > 解决方案 > 反应-Redux。Redux 状态更改但页面上未刷新数据

reactjs - 反应-Redux。Redux 状态更改但页面上未刷新数据

问题描述

我是 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

标签： reactjsredux

解决方案

由于您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;
      }
    });
  }
};

工作演示

推荐阅读