react：一个接口传入的数据，进行俩次处理，取数据的前个数据

想要用一个接口的数据，处理不同的需求业务？

 首先，先初始化俩个数组，目的是因为需求不一样，所以要将俩组数据分开处理，

然后，异步处理数据，第一个处理，是将全部数据取出数据的名字、图片，第二个是用slice（0,6）取出从索引0开始到索引6的数据，slice（0,1）取数据，第一个参数是开始位置，第二个是结束位置，这个比较灵活，你可以自己定义从第几项开始取。

然后到render之下，用你所需要的数据。

当然，大家有更好的意见，可以分享给我哦，感谢

import React from 'react'
import axios from '@services'
// import CONFIG from '@config'
import { Badge } from 'antd'
import Echart from '@components/echarts/Echart'
import BorderBox from '@components/border-box/BorderBox'
import './ApplicationModel.less'
import img2 from '@images/commander/u38108.gif'

export default class ApplicationModel extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      data: [],
      newData: []
    }
  }
  componentDidMount = () => {
    // 调用getdata
    this.getData()
  }

  getData = () => {
    // axios请求数据
    axios.post(`/xxxxxxxx/xxxxxxxxxx`).then(res => {
      // 正常返回
      if (res.code === 200) {
        console.log('qqqqqqqq', res)
        let data = []
        // 数据处理
        res.data.map(item => {
          data.push({ modelName: item.modelName, moldelIcon: item.moldelIcon })
        })
        console.log('dddd', data)
        // 设置state
        this.setState({
          data
        })
        const data2 = [...this.state.data]
        this.setState({
          newData: data2.slice(0, 4)
        })
        console.log('ss', this.state.data[0].modelName)
      } else {
        console.error(res.msg)
      }
    })
  }

  // _onVideoListLeft = () => {
  //   this.slider.slick.slickPrev()
  // }

  // _onVideoListRight = () => {
  //   this.slider.slick.slickNext()
  // }

  render () {
    const { data, newData } = this.state
    // echarts 配置项
    this.option = {
      title: {
        show: true,
        text: data.length, // 中间的数字
        left: '27%',
        top: '32%',
        textStyle: {
          fontSize: 28,
          fontFamily: 'DS Digital Bold',
          color: '#228EFD'
        }
      },
      legend: {
        orient: 'vertical',
        left: '60%',
        top: '25%',
        formatter: '{name}',
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          name: '可调用',
          type: 'pie',
          radius: ['60%', '80%'],
          center: ['30%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          itemStyle: {
            borderWidth: 4,
            borderColor: 'rgb(15, 23, 45)'
          },
          data: [
            { value: data.length, name: '已使用', color: '#2BE4CF' },
            { value: 7, name: '未使用', color: '#5A8BFF' }
          ]
        }
      ]
    }
    // const modelList = [
    //   [
    //     { img: img2, modelName: data[1].modelName },
    //     { img: img2, modelName: "data.modelName" }
    //   ]
    // ]
    return <BorderBox
      title='应用模型'
      type='top-highlighted'
      showAddonMore
      // onClickMore={this._onClickMore}
      className='application-model-container'
    >
      <div className='echart'>
        <Echart
          option={ this.option }
        />
      </div>
      <div className='activating'>正在启用模型</div>
      <div className='carousel-box'>
        {/* <div className='arrow-left' onClick={this._onVideoListLeft} />
        <div className='arrow-right' onClick={this._onVideoListRight} /> */}
        {
          newData.map((item, index) => {
            return (
              <div key={ index }>
                {
                  <div className='box' >
                    <Badge count={5} offset={[-6, 14]}>
                      <div className='img-box'>
                        <img src={item.moldelIcon === undefined ? img2 : item.moldelIcon} width='78px' height='78px' />
                      </div>
                    </Badge>
                    <div className='text' style={{ color: 'white' }}>{ item.modelName }</div>
                  </div>
                  // console.log('kkkk', item)
                }
              </div>
            )
          })
        }
      </div>
    </BorderBox>
  }
}