Question

已更新：

在我的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 && 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

有人告诉我，我不应该使用任何其他组件生命周期方法，但是我不确定如何通过单击按钮的结果来更新页面。

任何见识都会受到赞赏。

Answer 1

您可以创建一个函数并按状态存储已排序的汽车。为此，您使用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 && 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
  })
}

导出默认的connect（mapStateToProps，{getCars}）（Cars）;

单击按钮后运行排序方法后更新视图

1 个答案: