React组件首次加载不渲染数据行，需二次点击链接才显示求助

Hey there, let's break down why you're hitting this "two clicks needed" issue and fix it up!

核心问题：全局变量无法触发React组件重渲染 #

你现在用了一个**全局变量vehicleMakes**来存储API返回的数据，但React组件只会在自身的state或props发生变化时才会触发重新渲染。当componentDidMount里的Axios请求完成后，你只是更新了全局变量，并没有通知React组件数据已经更新——所以第一次点击导航链接时，组件渲染时vehicleMakes还是空数组，请求完成后数据变了但组件不会自动重新渲染。

至于第二次点击能显示数据，是因为此时组件会重新挂载，而全局变量已经缓存了上一次请求到的数据，所以这次render时能拿到数据并渲染行。但这完全是巧合，不是正确的实现方式。

修复方案：用组件状态管理数据 #

把全局变量换成VehicleMakes组件的内部状态，用setState来更新数据，这样React会自动触发组件重渲染，数据一回来就能立刻显示。

修改后的VehicleMakes组件代码：

class VehicleMakes extends React.Component{
  // 初始化组件状态
  state = {
    vehicleMakes: []
  }

  componentDidMount(){
    Axios.get(`http://localhost:15163/api/vehiclemakes`)
      .then((result) => {
        // 用setState更新状态，触发重渲染
        this.setState({
          vehicleMakes: result.data.data
        })
      })
      // 建议加上错误处理，避免请求失败时卡住
      .catch(err => {
        console.error('Failed to fetch vehicle makes:', err)
      })
  }

  render(){
    return(
      <div>
        <VehicleMakesTable vehicleMakes={this.state.vehicleMakes} />
      </div>
    );
  }
}

额外优化建议 #

• 可以添加加载状态，比如在请求未完成时显示“Loading...”，提升用户体验：

  state = {
    vehicleMakes: [],
    isLoading: true
  }
  
  componentDidMount(){
    Axios.get(`http://localhost:15163/api/vehiclemakes`)
      .then((result) => {
        this.setState({
          vehicleMakes: result.data.data,
          isLoading: false
        })
      })
      .catch(err => {
        console.error('Failed to fetch vehicle makes:', err)
        this.setState({ isLoading: false })
      })
  }
  
  render(){
    if(this.state.isLoading){
      return <div>Loading vehicle makes...</div>
    }
    return(
      <div>
        <VehicleMakesTable vehicleMakes={this.state.vehicleMakes} />
      </div>
    );
  }
  

这样修改后，第一次点击导航链接时，组件会在API请求完成后自动更新状态并渲染数据行，不需要第二次点击啦！

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