ReactJS - 排序 - TypeError: 0 是只读的

我试图在将对象映射到reactjs之前对其进行排序，但每次这样做时，我都会不断收到 TypeError: 0 is read only。我注意到加载时 props 是空的，但即使当我试图检查数组的长度并且仅在它大于 0 时应用排序，或者当数组存在需要精确时，它仍然会发生。当我尝试对任何东西进行排序时，它就停止工作了。

我希望将来能够通过不同的标准对这些进行排序，但到目前为止我什至无法对渲染进行常规排序......

我有以下内容：

玩具列表.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';


class ToysList extends Component {
  constructor (props) {
    super(props);
    this.state = {};
}


render () {
    var toys = this.props.toys;
    var arr = toys.sort((a,b) => parseFloat(a.price) - parseFloat(b.price));

    return (
        <div>
            <div key="list">
               { arr.map((toy, index) => (
                    <div key={toy.id}>
                        {toy.name}:<br/>
                        Quantity: {toy.quantity}<br/>
                        Price: {toy.price}<br/>
                        Rating: {toy.rating}
                    </div>
                )) }
            </div>
        </div>
    );
}
}

ToysList.propTypes = {
toys: PropTypes.arrayOf(
    PropTypes.shape({
        id: PropTypes.string,
        name: PropTypes.string,
        quantity:PropTypes.number,
        price:PropTypes.number,
        rating:PropTypes.number,
    }),
).isRequired,
};


export default ToysList;

如果有任何关于这些的提示，我将不胜感激。 谢谢

那可能是因为sort改变它所作用的数组（它就地排序).

If this.props.toys是不可变的，那么它会抛出该错误。

创建数组的副本并对其进行排序。

var toys = this.props.toys.slice();
// var toys = Array.from(this.props.toys);
// var toys = [...this.props.toys];
var arr = toys.sort((a,b) => parseFloat(a.price) - parseFloat(b.price));

2023 年更新

ECMAScript 2023 引入了.toSorted https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted数组的方法，它是非变异版本.sort.

这样，您现在可以在对数组进行排序之前跳过数组的复制。

var toys = this.props.toys;
var arr = toys.toSorted((a,b) => parseFloat(a.price) - parseFloat(b.price));