React组件切换报错：点击按钮无法渲染Table组件的解决求助

你遇到的问题主要有两个核心原因：一是Tab组件没有接收到items属性，导致this.props.items为undefined，调用.sort()时直接抛出错误；二是直接修改props数组的做法违反了React的props不可变原则。下面一步步帮你修复：

1. 给Tab组件传递必要的items数据 #

在Main组件里，你需要给Tab组件传入items属性——可以是从父组件state读取的真实数据，也可以先模拟一段测试数据来验证功能。比如先添加模拟数据：

import React, { Component } from "react";
import Form from './Form';
import Tab from './Table';

class Main extends Component {
  state = { 
    showing: true,
    // 模拟测试数据，实际项目可替换为接口返回数据
    items: [
      { name: "Alice", origin: "Beijing", destination: "Shanghai", seats: 2 },
      { name: "Bob", origin: "Guangzhou", destination: "Chengdu", seats: 1 },
      { name: "Charlie", origin: "Shenzhen", destination: "Beijing", seats: 3 }
    ]
  };

  render() {
    const { showing, items } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ showing: !showing })}>toggle</button>
        { showing ? <Form /> : <Tab items={items} /> }
      </div>
    );
  }
}

export default Main;

2. 安全处理排序逻辑，避免修改原props #

React中props是只读的，直接调用items.sort()会原地修改原数组（破坏props的不可变性），而且如果items临时为undefined时会触发报错，所以我们需要：

• 先判断items是否存在，不存在则返回空数组或加载状态
• 复制原数组后再排序（用[...items]或者items.slice()实现浅拷贝）

修改Tab组件的代码：

import React, { Component } from 'react';
import { Table } from 'reactstrap';

class Tab extends React.Component {
  render() {
    // 空值兜底处理 + 复制数组避免修改原props
    const items = this.props.items || [];
    // 先拷贝数组再执行排序，不污染原props数据
    const sortedItems = [...items].sort((a,b) => {
      const name1 = a.name.toLowerCase(), name2 = b.name.toLowerCase();
      return name1 === name2 ? 0 : name1 < name2 ? -1 : 1;
    });

    return (
      <Table striped>
        <thead>
          <tr>
            <th>Name</th>
            <th>Origin</th>
            <th>Destination</th>
            <th>Seats</th>
          </tr>
        </thead>
        <tbody>
          {sortedItems.map((item, index) => {
            // 给循环元素添加唯一key，符合React渲染最佳实践
            return (
              <tr key={index}>
                <td>{item.name}</td>
                <td>{item.origin}</td>
                <td>{item.destination}</td>
                <td>{item.seats}</td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    );
  }
}

export default Tab;

额外优化提示 #

• 如果你的items是从接口异步获取的，记得在Main组件里处理加载状态，比如在items为空时显示"数据加载中..."
• 尽量不用数组索引作为key，如果items有唯一ID（比如item.id），用唯一ID会更稳定

这样修改后，切换按钮就能正常渲染Form和Tab组件啦～

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