Question

在开发我的第一个ReactJS应用程序的过程中，我注意到在某些情况下，当我使用Router链接切换到其他组件时，render方法会多次调用该函数。我不确定这是否正确，或者就编码标准而言这是错误的。

以下示例：

组件1-主页组件2-电视

第1步：应用程序加载了主页，我移到了TV Component，这一次控制台仅记录了一次数据。

Step2 ：加载电视组件后，我将再次通过标题中徽标链接访问首页。

Step3 ：再次，如果我通过链接进入电视页面，这次控制台将记录4次数据。

Route.js

const Routes = () => (
<BrowserRouter>
<Route exact path='/' component={HomePage} />
<Route path='/tv' component={TV} />
</BrowserRouter>
);
export default Routes;

电视组件

class Tv extends Component {
componentDidMount() {
   this.props.tvFetchData();
}
createTvList = () => {
   let sub_videos = this.props.tv.sub_videos
     if (sub_videos) {
       console.log(sub_videos);
     } else {
       return 'loading...'
     }
}
render() {
   return (
      <div className="tv-wrapper">
         {this.createTvList()}
      </div>
     );
   }
}

menu.js中的链接

<Link to={menu.link} className="nav-link">{menu.name}</Link>

请让我知道这种方法是否有问题？

使用路由器

0 个答案: