Reactjs React应用程序界面不为'；t运行'sortalphabetical'函数后更新

我有一个React应用程序，它显示了一个汽车网格，我想点击一个按钮就可以对其进行排序

虽然我在

sortAlphabetically

函数的末尾实现了

this.setState

，但它并没有反映在网页上

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';
import { sortCar } from '../actions/cars';

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

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

sortAlphabetically = () => {
    console.log("sort button clicked")
    const newArray = [].concat(this.props.cars.cars)
    const orgArray = newArray.sort(function (a,b) {
      var nameA = a.name.toUpperCase();
      var nameB = b.name.toUpperCase();
      if (nameA < nameB) {
        return -1;
      } else if (nameA > nameB) {
        return 1;
      } 
      return 0;
    }, () => this.setState({ cars: orgArray }))  
    console.log(orgArray)
    this.props.sortCar(orgArray);
    }

componentDidMount() {
    this.props.getCars()
    this.setState({cars: this.props.cars})
}


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 key={car.id} car={car} />)}  
            {/* {this.state.cars.cars && this.state.cars.cars.map(car => <CarCard key={car.id} car={car} />)}           */}
            <CarForm />
    </div>
    );
  }
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    sortCar: (cars) => dispatch(sortCar(cars)),
    getCars: (cars) => dispatch(getCars(cars))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Cars);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../components/CarCarCard”导入CarCarCard；
从“/CarForm”导入CarForm；
导入“/Cars.css”；
从“../actions/cars”导入{getCars}；
从“../actions/cars”导入{sortCar}；
Component.defaultProps={
汽车：{cars:[]}
}
类Cars扩展组件{
建造师（道具）{
超级（道具）
此.state={
汽车：[]，
分类卡：[]
};
}
sortAlphabetically=（）=>{
log（“单击排序按钮”）
const newArray=[].concat（this.props.cars.cars）
const orgArray=newArray.sort（函数（a，b）{
var nameA=a.name.toUpperCase（）；
var nameB=b.name.toUpperCase（）；
if（nameA名称B）{
返回1；
} 
返回0；
}，（）=>this.setState（{cars:orgArray}））
console.log（orgArray）
this.props.sortCar（orgArray）；
}
componentDidMount（）{
这个.props.getCars（）
this.setState（{cars:this.props.cars}）
}
render（）{
返回(
汽车集装箱
分类
{this.props.cars.cars&&this.props.cars.cars.map（car=>）}
{/*{this.state.cars.cars&&this.state.cars.cars.map（car=>）}*/}
);
}
}
常量mapStateToProps=（状态）=>{
返回({
汽车：州。汽车
})
}
const mapDispatchToProps=（调度）=>{
返回{
sortCar：（cars）=>调度（sortCar（cars）），
getCars：（cars）=>调度（getCars（cars））
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（Cars）；

在控制台中查看，

orgArray

实际上按字母顺序排列数组。问题是，由于道具和状态之间的某些断开，UI没有更新

---

为什么mapStateToProps没有将两者连接在一起，以便阵列中的更改重新运行渲染？

如果要查看更新的更改，必须从状态中读取“cars”，而不是从道具中读取

{this.state.cars && this.state.cars.map(car => <CarCard key={car.id} car={car} />)}            

{this.state.cars&&this.state.cars.map（car=>）}

newArray.sort不会改变数组，它会返回一个新数组（）。你也需要重新分配它。设置状态必须没有引号。1）渲染中没有任何内容引用新的

sortedCars

数组，2）将

sortedCars

设置为字符串。已修复字符串引用，但如何在

render（）中实现
sortedCars

？我注释掉了我在道具上读到的行，并添加了你的行，但没有一个汽车对象出现在UI中-你知道是什么原因造成的吗？（我尝试在每个

this.state.cars

中添加另一个

.cars

，以匹配我的道具中的情况）是的，最初您所有的车都在道具中。如果需要，您可以在componentdidmount

componentdidmount（）{this.setState（{cars:this.props.cars}）；}

上设置状态，或者您可以使用

static gerDerivedStateFromProps（）

不幸的是，我仍然得到相同的结果。我不知道为什么州政府没有得到重视。奇怪的是，道具>汽车在我的反应开发工具中是空的。它是否也在redux州填充“汽车”？