Реагировать-Redux.Состояние Redux изменяется, но данные не обновляются на странице

Question

Я новичок в Redux и совершенно некомпетентен в React в целом.Извините, если это глупый вопрос.

У меня есть простая таблица с данными.Я нажал на заголовок и данные в состоянии отсортированы, но эти изменения не отображаются на странице.Данные отображаются только один раз и не отображаются повторно.

body

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);

header

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;
      }
    });
  }
};

демонстрация работ