21
Июл
2021

Не отрисовываются данные таблицы после сортировки

class App extends Component {
  constructor() {
    super()
      this.state = {data: [], sort: 'asc', sortField: 'mark'};
  }
  async componentDidMount() {
   await fetch('https://city-mobil.ru/api/cars')
    .then(res => res.json())
    .then(json => this.setState({
      data: _.orderBy(json, this.state.sortField, this.state.sort)
    }));
  }

  onSort = sortField => {
    const cloneData = this.state.data.concat();
    console.log(cloneData)
    const sort = this.state.sort === 'asc' ? 'desc' : 'asc';
    const data = _.orderBy(cloneData, sortField, sort);
    this.setState({ data, sort, sortField })
  }
  render() {
  return (
    <>
    <Search />
    <Table data={this.state.data}
    onSort={this.onSort}
    sort={this.state.sort}
    sortField={this.state.sortField}/>
    </>
  );
}
}
function Table(props) {
  return (
  <table className="table table-bordered">
    <thead>
      <tr>
        <th onClick={props.onSort.bind(this, 'mark')}>Марка и модель {props.sortField === "mark" ? <small>{props.sort}</small> : null}</th>
        <th>Эконом</th>
        <th>Комфорт</th>
        <th>Комфорт +</th>
        <th>Минивен</th>
        <th>Бизнес</th>
      </tr>
    </thead>
    <tbody> 
      {props.data.cars && props.data.cars.map((item, id) =>(
                <tr key={id}>
                    <td>{item.mark} {item.model}</td>
                    <td>{item.tariffs['Эконом'] ? item.tariffs['Эконом'].year : '-'}</td>
                    <td>{item.tariffs['Комфорт'] ? item.tariffs['Комфорт'].year : '-'}</td>
                    <td>{item.tariffs['Комфорт+'] ? item.tariffs['Комфорт+'].year : '-'}</td>
                    <td>{item.tariffs['Минивен'] ? item.tariffs['Минивен'].year : '-'}</td>
                    <td>{item.tariffs['Бизнес'] ? item.tariffs['Бизнес'].year : '-'}</td>
                </tr>
            ))} 
    </tbody>
  </table>
  )
}

Источник: https://ru.stackoverflow.com/questions/1307589/%D0%9D%D0%B5-%D0%BE%D1%82%D1%80%D0%B8%D1%81%D0%BE%D0%B2%D1%8B%D0%B2%D0%B0%D1%8E%D1%82%D1%81%D1%8F-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5-%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B-%D0%BF%D0%BE%D1%81%D0%BB%D0%B5-%D1%81%D0%BE%D1%80%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%BA%D0%B8

Тебе может это понравится...

Добавить комментарий