javascript - ReactJS - 排序 - TypeError : 0 is read only

Question

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

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

我有以下内容:

ToysList.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;

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

Answer 1

这可能是因为 sort 改变了它所处理的数组(它就地排序)。

如果 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));