React数据切换功能求助：点击按钮切换默认/低价前5数据

要实现点击按钮切换"显示前5条最低价商品"和"恢复原始数据"的功能，你需要添加一个布尔状态来跟踪当前展示模式，并修改按钮点击逻辑。以下是具体修改：

修改 App.js 文件 #

import "./App.css";
import Header from "./Header";
import FeedContainer from "./FeedContainer";
import { useState } from "react";
import FeedData from "./data/data";

function App() {
  // 保存数据展示状态
  const [dataspace, setDataspace] = useState(FeedData);
  // 新增布尔状态，标记是否处于"显示前5条最低价"模式
  const [showTopFive, setShowTopFive] = useState(false);

  const toggleTopFivePrice = () => {
    if (!showTopFive) {
      // 1. 复制原始数据避免修改原数组
      // 2. 按价格升序排序
      // 3. 截取前5条数据
      const sortedTopFive = [...FeedData]
        .sort((a, b) => a.price - b.price)
        .slice(0, 5);
      setDataspace(sortedTopFive);
      setShowTopFive(true);
    } else {
      // 恢复为原始数据
      setDataspace(FeedData);
      setShowTopFive(false);
    }
  };

  return (
    <>
      <Header />
      <div className="container">
        {/* 根据当前模式切换按钮文本，提升用户体验 */}
        <button onClick={toggleTopFivePrice}>
          {showTopFive ? "显示全部商品" : "TOP 5 最低价"}
        </button>
        <FeedContainer dataspace={dataspace} />
      </div>
    </>
  );
}

export default App;

关键修改说明 #

• 新增布尔状态 showTopFive：用于标记当前是否处于"显示前5条最低价"状态，初始值为false（默认显示全部数据）。
• 修改点击处理函数 toggleTopFivePrice：
  • 当showTopFive为false时，对原始数据排序并截取前5条，更新数据状态并切换模式为true。
  • 当showTopFive为true时，将数据恢复为原始的FeedData，并切换模式为false。
• 动态按钮文本：根据当前模式切换按钮显示文字，让用户清楚点击后的操作结果。

核心逻辑优势 #

• 使用原始数据FeedData作为排序源，避免因状态数据已被修改导致的错误排序。
• 通过布尔状态精准控制切换逻辑，确保每次点击都能正确切换展示模式。
• 保持数据不可变性：排序前先复制原始数组，避免直接修改常量FeedData，符合React编程规范。

其他组件无需任何修改即可配合新逻辑正常工作。

内容的提问来源于stack exchange，提问作者jitsujoseph