在router4.0的NavLink中的 isActive 的回调函数中，我使用this.setState改变组件的状态，这个回调会不停的执行。
import React, {Component} from 'react';
import {
BrowserRouter as Router,
Link,
NavLink
} from 'react-router-dom'
import './Home.scss';
import {topics} from '../../service/getData'
import Head from '../common/Head'
class Home extends Component {
constructor(props) {
super(props)
this.state = {
data: '', //列表数据
}
this.allData = this.allData.bind(this)
}
//默认获取全部
async componentWillMount() {
//获取请求的类别
let tabs = this.props.location.search.slice(1)
let res = await topics({page: 1, tab: tabs, limit: 40})
//这里没有问题
this.setState({
data: res.data
})
}
//获取全部
async allData(match, location) {
console.log(1)
//获取请求的类别
let tabs = location.search.slice(1)
let allRes = await topics({page: 1, tab: tabs, limit: 40})
this.setState({
data: allRes.data
})
}
render() {
return (
<div>
<Head/>
<div className="home-box">
<div className="home-content">
<div className="home-nav">
<NavLink exact to="/home?all" activeClassName="selected" isActive={(match, location) => {
if (location.search.slice(1) === 'all') {
//这里会不断的执行
this.allData(match, location)
return true
}
return false
}}>全部</NavLink>
<NavLink exact to="/home?good" activeClassName="selected" isActive={(match, location) => {
if (location.search.slice(1) === 'good') {
this.allData(match, location)
return true
}
return false
}}>精华</NavLink>
<NavLink exact to="/home?share" activeClassName="selected" isActive={(match, location) => {
if (location.search.slice(1) === 'share') {
this.allData(match, location)
return true
}
return false
}}>分享</NavLink>
<NavLink exact to="/home?ask" activeClassName="selected" isActive={(match, location) => {
if (location.search.slice(1) === 'ask') {
this.allData(match, location)
return true
}
return false
}}>问答</NavLink>
<NavLink exact to="/home?job" activeClassName="selected" isActive={(match, location) => {
if (location.search.slice(1) === 'job') {
this.allData(match, location)
return true
}
return false
}}>招聘</NavLink>
<NavLink exact to="/home?dev" activeClassName="selected" isActive={(match, location) => {
if (location.search.slice(1) === 'dev') {
this.allData(match, location)
return true
}
return false
}}>客户端测试</NavLink>
</div>
<div>
{this.state.data == '' ? '' : this.state.data.map((item, key) => {
return (
<div key={key}>
<img src={item.author.avatar_url}/>
<div>{item.reply_count}/{item.visit_count}</div>
<div style={item.styleTab}>{item.resTab}</div>
<div>{item.title}</div>
<div>{item.last_reply_at}</div>
</div>
)
})}
</div>
</div>
</div>
</div>
);
}
}
export default Home;