React可排序表格无法正常显示问题求助

1. 修复useSortableData Hook的数组赋值错误 #

你错误地把传入的items包裹成了嵌套数组，导致sortableItems变成[原数组]，长度自然为1。直接去掉外层数组包裹，推荐做浅拷贝避免修改原数据：

// 错误写法
let sortableItems = [items];

// 修复写法
let sortableItems = [...items]; // 浅拷贝原数组，避免副作用
// 若无需拷贝可直接赋值
// let sortableItems = items;

2. 修复ProductTable组件的props接收问题 #

组件参数是一个props对象，直接写(products)会把整个props对象当成products变量，导致无法正确获取表格数据。改成解构赋值或正确访问props属性：

// 错误写法
const ProductTable = (products) => {
  // 此处products是props对象，并非传入的表格数据
}

// 修复写法1：直接解构props
const ProductTable = ({ products }) => {
  // 现在products就是传入的表格数据数组
}

// 修复写法2：手动解构props
const ProductTable = (props) => {
  const products = props.products;
  // 后续逻辑正常使用products
}

3. 修复tbody的symbol字段渲染和多余标签问题 #

在tbody的每一行添加symbol字段的渲染，并删除多余的闭合标签（比如多余的</tr>或</td>）：

// 错误写法（示例）
<tbody>
  {sortedItems.map(item => (
    <tr key={item.id}>
      <td>{item.name}</td>
      <td>{item.price}</td>
    </tr></tr> {/* 多余的闭合标签 */}
  ))}
</tbody>

// 修复写法
<tbody>
  {sortedItems.map(item => (
    <tr key={item.id}>
      <td>{item.symbol}</td> {/* 新增symbol字段渲染 */}
      <td>{item.name}</td>
      <td>{item.price}</td>
    </tr> {/* 移除多余的闭合标签 */}
  ))}
</tbody>

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