期望效果:
bug:路由上的id有4个,对应的4个tab,加载此页面时请求四个的所有内容,需要发送4个_apiServerDetailById(id)查询详情请求,代码如
下:
class DeployTest extends React.PureComponent {
constructor(props) { // state中的数据要使用到props时,使用constructor(props)结构体方式
super(props)
const idArr = this.props.match.params.id.split('&')
this.state = {
idArr: idArr, // [1272715127132463106,1272715127170211841,1272715127207960577,1272715127245709313]
deployShow: []
}
}
componentDidMount() {
let deployShow = []
this.state.idArr.forEach(id => {
_apiServerDetailById(id).then(res => {
if (res.code === 200) {
deployShow.push(res.data)
this.setState({deployShow: [...deployShow]})
}
})
})
}
会出现tab名称与id顺序没有对应,效果图如下:
解决方案:首先定义好一个指定顺序的数组,之后将请求响应放入指定位置,就会一一对应了
class DeployTest extends React.PureComponent {
constructor(props) {
super(props)
const idArr = this.props.match.params.id.split('&')
this.state = {
idArr: idArr,
// 定义好一个指定顺序(依据id指定)的数组
deployShow: idArr.map(data => {
return {
id: data,
data: {}
}
}),
}
}
componentDidMount() {
this.state.idArr.forEach(id => {
_apiServerDetailById(id).then(res => {
if (res.code === 200) {
const deployShow = this.state.deployShow
const index = deployShow.findIndex(ele => ele.id === id) // 找到指定位置放入
deployShow[index].data = res.data
this.setState({deployShow: [...deployShow]})
}
})
})
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。