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

更新：

在我的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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../components/CarCarCard”导入CarCarCard；
从“/CarForm”导入CarForm；
导入“/Cars.css”；
从“../actions/cars”导入{getCars}；
Component.defaultProps={
汽车：{cars:[]}
}
类Cars扩展组件{
建造师（道具）{
超级（道具）
this.sortAlphabetically=this.sortAlphabetically.bind（this）
}
状态={
汽车：[]
};
这是我的国家({
sortedCars:newArray
})
sortAlphabetically=（事件）=>{
event.preventDefault（）
const newArray=[].concat（this.props.cars.cars）
排序（函数（a，b）{
var nameA=a.name.toUpperCase（）；
var nameB=b.name.toUpperCase（）；
if（nameA名称B）{
返回1；
} 
返回0；
})
返回新数组
}
componentDidMount（）{
这个.props.getCars（）
}
render（）{
返回(
汽车集装箱
分类
{this.props.cars.cars&&this.props.cars.cars.map（car=>）}
);
}
}
常量mapStateToProps=（状态）=>{
返回({
汽车：州。汽车
})
}
导出默认连接（mapStateToProps，{getCars}）（Cars）；

更新：我根据注释添加了this.setState，但它得到了一个

解析错误

我被告知不应该使用任何其他组件生命周期方法，但我不确定如何使用按钮单击的结果更新页面

---

如果您有任何见解，我们将不胜感激。

您可以创建一个函数，并将已排序的车辆存储在state上。为此，请使用

this.setState({
sortedCars:[内联函数的结果]
})

更新状态始终更新组件。或者，如果您需要将它们存储在另一个组件中，也可以从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
  })
}

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../components/CarCarCard”导入CarCarCard；
从“/CarForm”导入CarForm；
导入“/Cars.css”；
从“../actions/cars”导入{getCars}；
Component.defaultProps={
汽车：{cars:[]}
}
类Cars扩展组件{
建造师（道具）{
超级（道具）
此.state={
汽车：[]
};
this.sortAlphabetically=this.sortAlphabetically.bind（this）
}
sortAlphabetically=（事件）=>{
event.preventDefault（）
const newArray=[].concat（this.props.cars.cars）
排序（函数（a，b）{
var nameA=a.name.toUpperCase（）；
var nameB=b.name.toUpperCase（）；
if（nameA名称B）{
返回1；
} 
返回0；
})
这是我的国家({
sortedCars:newArray
})
}
componentDidMount（）{
这个.props.getCars（）
}
render（）{
返回(
汽车集装箱
分类
{this.props.cars.cars&&this.props.cars.cars.map（car=>）}
);
}
}
常量mapStateToProps=（状态）=>{
返回({
汽车：州。汽车
})
}

---

导出默认连接（mapStateToProps，{getCars}）（Cars）

谢谢，我在我的Cars类中添加了这个，但是我得到了一个

解析错误

。这与我的

构造函数中如何绑定
这个
有关吗？我想这就是
设置状态的地方。将其移动到排序中，并将状态定义移动到构造函数中。奇怪的是，它仍然没有更新UI。我想我需要对我正在排序的内容（汽车数组中汽车对象的名称属性）进行更具体的分类。相反，当我键入
newArray
时，控制台中会出现一个未定义的错误。为什么我没有访问该阵列的权限？