React 在地图之前按字母顺序对 REST API 响应数据进行排序

Question

这是我的代码，用于获取 API 响应，我想根据要求对其进行排序，

import React, { useEffect, useState } from 'react'

function DataList( props ) {

    const [isLoading, setIsLoading] = useState(false);
    const [objData, setObjData] = useState({});

    useEffect( ()=>{
        setIsLoading(true);
        fetch("https://dummyjson.com/product")
        .then(res => res.json())
        .then((json)=>{
            setObjData(json);
            setIsLoading(false);
        })
    }, [] );
    console.log(objData);

  return (
    <div>
        <h1><u><i>Data List</i></u></h1>
        
        <table border="1" cellPadding={5} width={500}>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Brand</th>
                    <th>Price</th>
                    <th>Thumbnail</th>
                </tr>
            </thead>
            
            <tbody>
            <tr>
                <td colSpan={4}>{isLoading ? <p>Loading...</p> : null}</td>
            </tr>
                {
                    // @ref:https://stackoverflow.com/questions/69080597/%C3%97-typeerror-cannot-read-properties-of-undefined-reading-map
                    objData['products']?.map((product) => {
                        return <tr key={product.id}>
                            <td>{product.title}</td>
                            <td>{product.brand}</td>
                            <td>{product.price}</td>
                            <td align='center'>
                                <img src={product.thumbnail} alt={product.title} width={100} />
                            </td>
                        </tr>
                    })
                }

            </tbody>
        </table>
    </div>
  )
}

export default DataList

这是回复格式

Answer 1

您可以使用

Array.prototype.toSorted()

，现在所有浏览器都支持MDN

Array 实例的

toSorted()

方法是

sort()

方法的复制版本。它返回一个新数组，其中元素已排序。

我已经测试过这个，对我有用，还将

objData

直接更改为数组。

import React ,{ useEffect, useState }from 'react';

function DataList( props ) {

    const [isLoading, setIsLoading] = useState(false);
    const [objData, setObjData] = useState(null);

    useEffect( ()=>{
        setIsLoading(true);
        fetch("https://dummyjson.com/product")
        .then(res => res.json())
        .then((json)=>{
          console.log(json)
            const data = json.products.toSorted((a,b) => a.title.localeCompare(b.title));
            console.log(data);
            setObjData(data);
            setIsLoading(false);
        }).catch(console.warn)
    }, [] );
    console.log(objData);

  return (
    <div>
        <h1><u><i>Data List</i></u></h1>
        
        <table border="1" cellPadding={5} width={500}>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Brand</th>
                    <th>Price</th>
                    <th>Thumbnail</th>
                </tr>
            </thead>
            
            <tbody>
            <tr>
                <td colSpan={4}>{isLoading ? <p>Loading...</p> : null}</td>
            </tr>
                {
                    // @ref:https://stackoverflow.com/questions/69080597/%C3%97-typeerror-cannot-read-properties-of-undefined-reading-map
                    objData?.map((product) => {
                        return <tr key={product.id}>
                            <td>{product.title}</td>
                            <td>{product.brand}</td>
                            <td>{product.price}</td>
                            <td align='center'>
                                <img src={product.thumbnail} alt={product.title} width={100} />
                            </td>
                        </tr>
                    })
                }

            </tbody>
        </table>
    </div>
  )
}