1

У меня в приложении рендерится вот такая таблица

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

6
  • Клик по отрендереннтой таблице? Если да, то это типичная ошибка при работе с js. Надо после перезаписи таблицы снова привязывать клик по ней к обработчику. 16 фев 2019 в 14:05
  • Фактически да, клик по отрендеренной таблице. А как заново привязать клик к обработчику? 16 фев 2019 в 14:24
  • Я не очень силен в реакт, поэтому пусть кто-то другой поправит код. В ES6 я создаю метод bindEvents(), который вызываю в конструкторе и после обновления элементов, на которых висел клик. 16 фев 2019 в 14:32
  • @KAGGDesign это реакт, он сам навешивает обработчик - не надо ничего перепривязывать
    – user177221
    16 фев 2019 в 14:48
  • @AndreyGreen отдебагайте mapStateToProps, проверьте, что ваша функция сортировки действительно возвращает другой объект
    – user177221
    16 фев 2019 в 14:52

1 ответ 1

1

Всем спасибо за помощь. Проблема была в самой функции сортировки. Вот правильный вариант.

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

В чем именно была причина, еще не знаю, мне прислали уже рабочий код, чуть позже буду изучать и рассматривать.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.