VIP26/react/study5/project/src/pages/shop.jsx

import { useState } from "react";
import { Link } from "react-router-dom";
import './shop.css'
const list = [
  {
    id: 1,
    name: "孙悟空",
    age: 20,
    describe: "金箍棒",
  },
  {
    id: 2,
    name: "猪八戒",
    age: 22,
    describe: "九齿钉耙",
  },
  {
    id: 3,
    name: "沙和尚",
    age: 24,
    describe: "月牙铲",
  },
];
function Shop() {
  let [newList] = useState(list);
  return (
    <div className="shop">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>名字</th>
            <th>年龄</th>
            <th>武器</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {/* <td>1</td>
                <td>aaa</td>
                <td>23</td>
                <td>121212</td> */}
          {newList.map((item, index) => (
            <tr key={index}>
              <td>{index + 1}</td>
              <td>{item.name}</td>
              <td>{item.age}</td>
              <td>{item.describe}</td>
              <td>
                <Link to={{pathname:`/shop/details/${item.id}`}}>详情</Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
export default Shop;