Question

我正在尝试在将对象映射到reactjs之前对其进行排序，但每次我都这样做，我不断得到TypeError：0是只读的。我注意到在加载时道具是空的，但即使我试图检查数组的长度并且只在高于0时应用sort，或者当数组存在要精确时，它仍然会发生。我尝试对任何东西进行排序的那一刻，它就会停止工作。

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

我有以下内容：

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

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

1 个答案: