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

【问题标题】：ReactJS - sorting - TypeError: 0 is read onlyReactJS - 排序 - TypeError：0 是只读的
【发布时间】：2018-03-14 13:06:48
【问题描述】：

我正在尝试在将对象映射到 reactjs 之前对其进行排序，但是每次我这样做时，我都会不断收到 TypeError: 0 is read only。我注意到在加载时道具是空的，但即使我试图检查数组的长度并且只在它高于 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;

如果有任何提示，我将不胜感激。谢谢

【问题讨论】：

你没有收到警告，告诉你地图函数应该返回一些东西？
玩具的默认值是多少？当我用错误的类型初始化一个数组时，我遇到了类似的问题。例如，使用空对象文字而不是字符串文字。

标签： javascript reactjs sorting

【解决方案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));

【讨论】：