Question

我有一个json请求调用的fetch文件，如下所示：

[
{
    "Infos": [
        {
            "id": {
                "Id": "105254"
            },
            "total": 142854739
        },
        {
            "id": {
                "Id": "105255"
            },
            "total": 112854739
        },
        {
            "id": {
                "Id": "105256"
            },
            "total": 132854739
        },
        {
            "id": {
                "Id": "106540"
            },
            "total": 122868818
        }
    ]
}
]

我想基于total字段对数据进行排序，但是正如您所看到的，所有对象都在另一个名为Infos的数组中，并且我不能像这样对数据进行排序：

 Maindata.sort((a, b) => a.total - b.total);

如何根据另一个数组中的total字段对数据进行排序？

     class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        data: [],
        library: null,
        perPage: 20,
        currentPage: 1,
        maxPage: null,

    }
}
componentDidMount() {
    fetch('/json.bc', {
        method: 'get',
    })
        .then(response => response.text())
        .then(text => {
            let Maindata = JSON.parse(text.replace(/\'/g, '"'))
            Maindata.sort((a, b) => a.Infos[i].total - b.Infos[i].total) // I want to sort data here /////

            this.setState(state => ({
                ...state,
                data: Maindata
            }), () => {
                this.reorganiseLibrary()
            })
        }).catch(error => console.error(error))

}

reorganiseLibrary = () => {
    const { perPage, data } = this.state;
    let library = data;
    library = _.chunk(library, perPage);
    this.setState({
        library,
        currentPage: 1,
        maxPage: library.length === 0 ? 1 : library.length
    })
}



// Previous Page
previousPage = event => {
    this.setState({
        currentPage: this.state.currentPage - 1
    })
}
// Next Page 
nextPage = event => {
    this.setState({
        currentPage: this.state.currentPage + 1
    })
}

// handle per page
handlePerPage = (evt) =>
    this.setState({
        perPage: evt.target.value
    }, () => this.reorganiseLibrary());

// handle render of library
renderLibrary = () => {
    const { library, currentPage } = this.state;
    if (!library || (library && library.length === 0)) {
        return <div>NOResult</div>
    }
    return library[currentPage - 1].map((item, i) => (
        <div className="Wrapper">{this.renderInfo(item)}</div>
    ))
}

renderInfo(element){
    let len =element.Infos.length
    for (let i = 0; i < len; i++) {
      return element.Infos[i].total
    }

}

render() {
    const { library, currentPage, perPage, maxPage } = this.state;
    return (
        <div>
            {this.renderLibrary()}
            <ul id="page-numbers">
                <li className="nexprevPage">
                    {currentPage !== 1 && (
                        <button onClick={this.previousPage}><span className="fa-backward"></span></button>
                    )}
                </li>
                <li className="controlsPage activeCnt">{this.state.currentPage}</li>
                <li className="restControls">...</li>
                <li className="controlsPage">{this.state.maxPage}</li>
                <li className="nexprevPage">
                    {(currentPage < maxPage) && (
                        <button onClick={this.nextPage}><span className="fa-forward"></span></button>
                    )}
                </li>
            </ul>
        </div>
    )
}
}
ReactDOM.render(<App />, document.getElementById('Result'))

Answer 1

您可以通过映射外部数组并对内部数组进行排序来对内部字段进行排序

Maindata = Maindata.map((data) => ({Infos: data.Infos.sort((a, b) => a.total - b.total)}))

对ReactJs中另一个数组中的数组进行排序

1 个答案: