Блог

ОБНОВЛЕННЫЙ:

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

Вот мой код:

 import React, { Component } from 'react';
import { connect } from 'react-redux';
import CarCard from '../components/CarCard';
import CarForm from './CarForm';
import './Cars.css';
import { getCars } from '../actions/cars';

Component.defaultProps = {
cars: { cars: [] }
}

class Cars extends Component {
  constructor(props) {
    super(props)
    this.sortAlphabetically = this.sortAlphabetically.bind(this)
}
state = {
    cars: []
};

this.setState({
    sortedCars: newArray
})

sortAlphabetically = (event) => {
    event.preventDefault()   
    const newArray = [].concat(this.props.cars.cars)
        newArray.sort(function (a,b) {
            var nameA = a.name.toUpperCase();
            var nameB = b.name.toUpperCase();
            if (nameA < nameB) {
                return -1;
            }
            if (nameA > nameB) {
                return 1;
                } 
                return 0;
            })
        return newArray
    }

componentDidMount() {
    this.props.getCars()
}

render() {
    return (
    <div className="CarsContainer">
        <h3>Cars Container</h3> 
            <button onClick={this.sortAlphabetically}>Sort</button>
            {this.props.cars.cars amp;amp; this.props.cars.cars.map(car => <CarCard delete={this.props.delete} key={car.id} car={car} />)}            
            <CarForm />
    </div>
    );
  }
}

 const mapStateToProps = (state) => {
  return ({
    cars: state.cars
  })
}


   export default connect(mapStateToProps, { getCars })(Cars);
  

ОБНОВЛЕНО: я добавил this.setState в комментарии, но он получает parsing error

Мне сказали, что я не должен использовать какие-либо другие методы жизненного цикла компонента, но я не уверен, как обновить страницу с результатом нажатия кнопки.

Любая информация была бы оценена.

Вы могли бы создать функцию и сохранить отсортированные автомобили по состоянию. Для этого вы используете this.setState({
sortedCars: [results of your inlined function]
})

Состояние обновления всегда обновляет компонент. В качестве альтернативы вы могли бы сохранить и прочитать их из redux, если они вам нужны в другом компоненте.

    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import CarCard from '../components/CarCard';
    import CarForm from './CarForm';
    import './Cars.css';
    import { getCars } from '../actions/cars';

    Component.defaultProps = {
      cars: { cars: [] }
    }

    class Cars extends Component {
     constructor(props) {
       super(props)
       this.state = {
         cars: []
       };

       this.sortAlphabetically = this.sortAlphabetically.bind(this)
    }


sortAlphabetically = (event) => {
    event.preventDefault()   
    const newArray = [].concat(this.props.cars.cars)
        newArray.sort(function (a,b) {
            var nameA = a.name.toUpperCase();
            var nameB = b.name.toUpperCase();
            if (nameA < nameB) {
                return -1;
            }
            if (nameA > nameB) {
                return 1;
                } 
                return 0;
            })
    this.setState({
        sortedCars: newArray
    })
    }

componentDidMount() {
    this.props.getCars()
}

render() {
    return (
    <div className="CarsContainer">
        <h3>Cars Container</h3> 
            <button onClick={this.sortAlphabetically}>Sort</button>
            {this.props.cars.cars amp;amp; this.props.cars.cars.map(car => <CarCard delete={this.props.delete} key={car.id} car={car} />)}            
            <CarForm />
    </div>
    );
  }
}

 const mapStateToProps = (state) => {
  return ({
    cars: state.cars
  })
}
  

экспортировать подключение по умолчанию (mapStateToProps, { getCars }) (Автомобили);