React组件传值渲染异常：子组件无法渲染父组件传递的列名

咱们一步步拆解你遇到的问题，核心有三个关键点导致列名不渲染、子组件不更新：

1. 子组件仅初始化时同步props到state，后续props变更无响应 #

你的CarTable组件在已废弃的componentWillMount钩子中，把props的值存到了自身state里，但这个逻辑只执行一次。初始时父组件App的ordering是空数组，CarTable初始化时拿到的props.order自然也是空的；之后App在componentDidMount里更新了state，但子组件不会再同步新的props到自己的state，所以不会触发重渲染。

2. 父组件changeColumnOrder方法的setState错误 #

在切换列序的方法里，你错误地把整个二维数组order赋值给了ordering：

this.setState({ ordering: order });

正确的应该是赋值随机选中的那一组列序order[random]，否则ordering变成二维数组，map时自然渲染不出正确列名。

3. 子组件tbody列顺序固定，未跟随列序变化 #

CarTable里tbody的td是写死的Make、Model、Year顺序，不管columnOrder怎么变，表格内容顺序都不会更新，不符合需求。

修复后的完整代码 #

修复后的App.tsx #

import React from 'react';
import './App.css';
import { Car } from './Models/Car';
import CarTable from './CarTable';

class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = { cars: [], ordering: [] }
    this.changeColumnOrder = this.changeColumnOrder.bind(this);
  }

  componentDidMount() {
    const order = [
      ["Model", "Make", "Year"],
      ["Model", "Year", "Make"],
      ["Make", "Model", "Year"],
      ["Make", "Year", "Model"],
      ["Year", "Model", "Make"],
      ["Year", "Make", "Model"]
    ];
    // 修正随机数范围，*6才能覆盖全部6组列序
    const random = Math.floor(Math.random() * 6);
    const models: string[] = ["Accord", "Civic", "Pathfinder"];
    const make: string = "Honda";
    const years: number[] = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019];
    const cars: Car[] = [];

    for (let i = 0; i < 40; i++) {
      const randYear = Math.floor(Math.random() * 10);
      const randModel = Math.floor(Math.random() * 3);
      cars.push(new Car(models[randModel], make, years[randYear]));
    }

    console.log("Cars generated...");
    console.log(cars);
    this.setState({ cars: cars, ordering: order[random] });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Car Table</h1>
          <button onClick={this.changeColumnOrder} className="columnButton">Change Column Order</button>
          <CarTable cars={this.state.cars} order={this.state.ordering}></CarTable>
        </header>
      </div>
    );
  }

  changeColumnOrder() {
    const order = [
      ["Model", "Make", "Year"],
      ["Model", "Year", "Make"],
      ["Make", "Model", "Year"],
      ["Make", "Year", "Model"],
      ["Year", "Model", "Make"],
      ["Year", "Make", "Model"]
    ];
    const random = Math.floor(Math.random() * 6);
    console.log("Testing random order");
    console.log(order[random]);
    // 修正setState赋值，使用选中的单组列序
    this.setState({ ordering: order[random] });
    // setState是异步的，如需查看最新值，建议用回调：
    // this.setState({ ordering: order[random] }, () => console.log(this.state.ordering));
  }
}

export default App;

修复后的CarTable.tsx #

import React from 'react';
import './App.css';
import { Car } from './Models/Car';

export default class CarTable extends React.Component<any, any> {
  // 推荐直接使用props，避免维护额外state带来的同步问题
  // 若必须用state，需添加componentDidUpdate监听props变化并同步state

  render() {
    const { cars, order: columnOrder } = this.props;
    return(
      <table id="carsTable">
        <thead>
          <tr>
            {columnOrder.map((column: string, key: number) => {
              console.log("in header...")
              console.log({column});
              return(<th key={column}>{column}</th>)
            })}
          </tr>
        </thead>
        <tbody>
          {cars.map((car: Car, key: number) => {
            return(
              <tr key={key}>
                {/* 根据columnOrder动态渲染对应属性 */}
                {columnOrder.map((col: string, idx: number) => (
                  <td key={`${key}-${idx}`}>{car[col as keyof Car]}</td>
                ))}
              </tr>
            )
          })}
        </tbody>
      </table>
    )
  }
}

关键修复点说明 #

1. 去掉子组件内部state，直接使用props：React是单向数据流，父组件更新props后，子组件会自动触发重渲染。如果必须维护子组件state，要通过componentDidUpdate监听props变化并同步更新state。
2. 修正父组件setState逻辑：确保ordering始终是对应选中列序的一维数组。
3. 动态渲染表格内容：tbody的td通过遍历columnOrder来渲染对应Car属性，不再写死顺序。
4. 修正随机数范围：原来的*5只能取0-4，最后一组列序永远不会被选中，改成*6才能覆盖全部6组选项。

另外，componentWillMount已被React废弃，建议将初始化逻辑放在constructor或componentDidMount中。

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