对不同组件中的数据进行排序ReactJS

Question

我正在尝试放置一个按钮，单击该按钮将按降序对信息进行排序。

我将组件分开，在这个组件中，我有按钮和 onclick 来执行排序（在控制台中，您可以看到它已经在执行排序）。

const [ascending, setAscending] = useState(true);

    const handleSortDesc = () => {
        for (const info in data){
            const auditorium = data[info].representations;
            const sortedDataAsc = [...auditorium].sort((a, b) => (a.regularSeatsLeft - b.regularSeatsLeft));
            console.log('Sorted Data (Descending):', sortedDataAsc);
            setAscending(ascending); 
        }
    };
     
    return (
        <div className="auditorium-container"> 
                {data.map(d => (
                <div key={d.name} className={`auditorium auditorium-${d.id}`} >
                    <div className="auditorium-header">
                        <h2>{d.name}</h2>
                        <button type="button" className="button" onClick={handleSortDesc} >
                            SORT DESC
                        </button>
                    </div>   
                <Representation 
                    data={data}
                /> 
                </div>
                ))}
        </div>
    );
};```

[console image](https://i.stack.imgur.com/vhKzX.png)

But I don't know how to send that new ordered information to the component where it renders and prints the information.

常量表示 = ({data}) => {

return (
    <div>
        {data.map(auditoriums => (
        <div className={`auditorium-${auditoriums.id}`}>
            {auditoriums.representations.map(r => (
            <div className="representation">
                <span className="time">{r.date} - {r.time}</span>
                <span className="label">Seats Remaining:</span>
                <span className={r.regularSeatsLeft > 0 ? 'available' : '' }>
                        {r.regularSeatsLeft || 0}
                </span> 
            </div>
            ))}
        </div>  
    ))}
    </div>
);

};

Can anyone help me, please? 🙂

Answer 1

第一种方法：

您可以通过在

handleSortDesc

函数中创建一个新变量来完成此操作。然后用排序后的值更新它的值。 for 循环完成后，将新变量设置为状态。那么你也不需要使用上升状态，因为它对功能没有影响。

const handleSortDesc = () => {
     const sortedData = [...data];
     for (const info in sortedData){
         const auditorium = sortedData[info].representations;
         const sortedDataAsc = [...auditorium].sort((a, b) => (a.regularSeatsLeft - b.regularSeatsLeft));

         sortedData[info].representations = sortedDataAsc;
         console.log('Sorted Data (Descending):', sortedDataAsc);
      }

      setData(sortedData);
    }; 

第二种方式：

您想通过单击按钮对所有组件进行升序或降序排序。为此，存储升序状态并在用户单击按钮时更改它并按状态值对其进行排序是有意义的。单击按钮后将升序状态设置为 true/false 并将其作为 prop 发送到组件。然后如果 props.ascending 为 true/false，则按降序/升序排序后映射数据。

- 当用户单击按钮时将升序状态设置为 true/false:

<button type="button" className="button" onClick={() => handleSortDesc(true)}>
   SORT DESC
</button>

- 将状态作为 prop 发送到相关组件：

<Representation data={data} ascending={ascending}/> 

- 如果 ascending prop 具有 true 值，则在排序后映射它：（如果为 false，则可以降序排序）

const Representation = ({data, ascending}) => {
return (
    <div>
        {data.map(auditoriums => (
        <div className={`auditorium-${auditoriums.id}`}>
            {(ascending ? 
                 [...auditoriums.representations].sort((a, b) => (a.regularSeatsLeft - b.regularSeatsLeft)) :
                     auditoriums.representations).map(r => (
            <div className="representation">
                <span className="time">{r.date} - {r.time}</span>
                <span className="label">Seats Remaining:</span>
                <span className={r.regularSeatsLeft > 0 ? 'available' : '' }>
                        {r.regularSeatsLeft || 0}
                </span> 
            </div>
            ))}
        </div>
    ))}
    </div>
);