У меня в приложении рендерится вот такая таблица
let OurBody = ({ filteredArr }) => {
return (
<tbody>
{filteredArr.map(element =>
<tr key={element._id}>
<td>{element.company}</td>
<td>{element.balance}</td>
</tr>
)}
</tbody>
)
}
const mapStateToProps = (state) => {
return {
filteredArr: getSortedCompanies(state.json, state.sortCompany)
};
}
export default connect(mapStateToProps)(OurBody);
Компонент заголовка таблицы. При срабатывании onClick моя функция сортирует данные в стейте. Подписался на обновления стейта, вывел в консоль - всё красиво, всё корректно.
let Headersort = ({ dispatch }) => (
<thead>
<tr>
<td onClick={() => {dispatch(sortCompany());}}>Company</td>
<td>Balance</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;
Компонент с функцией сортировки данных, через которую проходит json с данными, а затем передается в компонент OurBody:
//getSortedCompanies
export default (json, sortCompany) => {
if(sortCompany===null) {
return json;
}
else if(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;
}
});
}
}
По клику всё что нужно меняется, редьюсер отрабатывает, стейт Redux-а обновляется, но таблица рендерится только один раз. После этого она не обновляется. Хотя при обновлении стейта вся страница должна обновляться. Причем проблема не в данных, нигде никаких ошибок нет. Отдельно вывел таблицу с уже отсортированными данными, всё отрисовалось без ошибок. Если для анализа нужны будут другие компоненты - добавлю и их.
P.S. Обновил ссылку на гитхаб (старая ссылка не работала) https://github.com/DrGreenNow/React-Redux-Table