React 组件不会在初始加载时呈现答案

【问题标题】：React component doesn't get rendered on initial loadReact 组件不会在初始加载时呈现
【发布时间】：2018-05-27 10:22:48
【问题描述】：

我最近开始学习 React，我正在努力让我的简单应用程序能够正常工作。

我有主 App 组件：

class App extends Component {
  render() {
   return (
    <BrowserRouter>
     <div>
      <header>
       <h1>Test</h1>
      </header>
    <nav className="navbar navbar-default">
    <div className="container-fluid">
      <div className="navbar-header">
          <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
            </button>
      </div>
      <div className="collapse navbar-collapse" id="navbar-collapse-1">
        <ul className="nav navbar-nav">
          <li><NavLink to="/vehiclemakes">Vehicle Makes</NavLink></li>
        </ul>
      </div>
    </div>
    </nav>
    <div className="container">
     <Route path="/vehiclemakes" component={VehicleMakes}/>
    </div>
  </div>
  </BrowserRouter>
);
 }
}

如您所见，我正在使用路由，并且在我的导航栏中，我有一个指向 Vehicle Makes 组件的链接，该组件应该使用我通过 api 调用获得的车辆制造来呈现表格：

let vehicleMakes = [];

class VehicleMakes extends React.Component{           
componentDidMount(){
    Axios.get(`http://localhost:15163/api/vehiclemakes`)
    .then((result) => {
     const vehicleMakesData = result;
        vehicleMakes = vehicleMakesData.data.data;
    })
  }

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

VehicleMakesTable 组件渲染 VehicleMakesTableHeader 和 VehicleMakesTableRow 组件：

class VehicleMakesTable extends React.Component{
render(){
    console.log("table");
    const rows = [];
    this.props.vehicleMakes.forEach((vehicleMake) => {
       rows.push(
        <VehicleMakesTableRow 
            vehicleMake={vehicleMake} 
            key={vehicleMake.id} />
       ); 
    });       
    return(
        <table>
            <thead>
                <VehicleMakesTableHeader />
            </thead>
            <tbody>{rows}</tbody>
        </table>
    );
  }
 }

class VehicleMakesTableHeader extends React.Component{
render(){
    return(
        <tr>
            <th>Name</th>
        </tr>
    );
  }
}

class VehicleMakesTableRow extends React.Component{
render(){
    const vehicleMake = this.props.vehicleMake;
    return(
        <tr>
            <td>{vehicleMake.name}</td>
        </tr>
    );
  }
}

我遇到的问题是，在初始加载时，当我单击主 App 组件中的 Vehicle Makes 链接时，我的表格被渲染但没有任何行。所以“VehicleMakesTableHeader”组件会被渲染，但“VehicleMakesTableRow”组件不会。当我再次（第二次）单击该链接时，“VehicleMakesTableRow”组件也会被渲染。

我不知道我做错了什么，为什么我必须点击两次链接才能正确呈现表格？

【问题讨论】：

标签： reactjs react-router axios

【解决方案1】：

问题出在这里：

let vehicleMakes = [];

class VehicleMakes extends React.Component{           
  componentDidMount(){
    Axios.get(`http://localhost:15163/api/vehiclemakes`)
    .then((result) => {
       const vehicleMakesData = result;
       vehicleMakes = vehicleMakesData.data.data;
    })
  }

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

您将vehicleMakes 保留为常规变量。 React 不会收到有关此变量的任何更改的通知，也不会重新渲染。这就是为什么你有类似react state 的东西。每次state 更改时，react 都会收到状态已更改的通知并重新渲染。修复：

class VehicleMakes extends React.Component{       
  constructor(props) {
    super(props);
    this.state = { vehicleMakes: [] }
  }

  componentDidMount(){
    Axios.get(`http://localhost:15163/api/vehiclemakes`)
    .then((result) => {
       const vehicleMakes = result.data.data;
       this.setState({ vehicleMakes })
    })
  }

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

【讨论】：

【解决方案2】：

您需要将vehicleMakes 存储在状态中，以便在componentDidMount 中更新它时触发重新渲染：

class VehicleMakes ... {
  state = { vehicleMakes: [] }

  ...

    .then(result => this.setState({ vehicleMakes: result.data.data }));

  ...

    <VehicleMakesTable vehicleMakes={this.state.vehicleMakes} />

【讨论】：