期望效果:

image.png

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顺序没有对应,效果图如下:
image.png

解决方案:首先定义好一个指定顺序的数组,之后将请求响应放入指定位置,就会一一对应了
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]})
        }
      })
    })
  }

云端的日子
66 声望1 粉丝

引用和评论

0 条评论