Попытка удалить индекс выше количества детей

Я использую Victory Native для рисования исторических графиков криптовалюты, и, как пользовательские свитки, он покажет стоимость монеты в то время.

Моя реализация успешно работает на iOS, но на Android выдает следующую ошибку

Попытка удалить индекс вида выше числа детей 2

Вот так выглядит мой График Победы

          <VictoryGroup 
                 padding={0}
                 height= {150}
                containerComponent={
                    <VictoryCursorContainer
                    cursorDimension="x"
                    onCursorChange={(value, props) => this.handleCursorChange(value,props)}
                            cursorLabel={(cursor) => ``}
                        />
                     }>
                    <VictoryArea
                        style={{ data: { fill: this.chartColor } }}
                        data={this.props.coinHistory} 
                        domain={{ 
                            y: [this.coinMinimum, this.coinMaximum] 
                        }}
                        groupComponent={<VictoryClipContainer clipPadding={{ top: 1, right: 1 }}/>}
                            style={{ data: { fill: this.chartColor, stroke: this.chartBorder, strokeWidth: 3, strokeLinecap: "round" } }}
                    />
                        {point}
                    </VictoryGroup>

И здесь работает вся логика

let coinMinimumA = []
let point;
const { range, first, last } = _;


const findClosestPointSorted = (data, value) => {
    // assumes 3 things:
  // 1. data is sorted by x
  // 2. data points are equally spaced
  // 3. the search is 1-dimentional (x, not x and y)

  if (value === null) return null;
    const start = first(data).x;
    const range = (last(data).x - start);
  const index = Math.round((value - start)/range * (data.length - 1));
  return data[index];

};

class CoinChart extends PureComponent {
    constructor() {
        super()
            this.coinMinimum
            this.coinMaximum
            this.chartColor
            this.chartBorder
            this.valueAtSelectedTime
            this.selectedTime
            this.chartPriceColorMain
    }

    state = {
        loaded: false,
        activePoint: null
    }


    handleCursorChange = (value, props) => {

        //Converting the value we want to show 
        const numberSearch = Math.round(value)
        this.selectedTime = this.props.coinHistory[numberSearch]["cHT"]
        this.selectedTime  = new Date(this.selectedTime).toString()
        this.selectedTime = this.selectedTime.split(' ').slice(0, 5).join(' ');
        this.valueAtSelectedTime = this.props.coinHistory[numberSearch]["y"]
        //This will call function which declared in the global modular scope 
        this.setState({
          activePoint: findClosestPointSorted(this.props.coinHistory, value)
      });
    }



    render () {


 //THis is that dot which would appear on the slected point 
    let  activePoint  = this.state.activePoint;
    point = activePoint ?
    (<VictoryScatter data={[activePoint]} style={{data: {size: 200, fill: "#FFC107"} }}/>)
  : null;
        if (this.props.coinHistory.length > 1) {

                coinMinimumA =[]
            //Making aray of all the value in Y axis to make domain 
            for (let i = 0; i < this.props.coinHistory.length; i++ ) {
                coinMinimumA.push(this.props.coinHistory[i]["y"])
            }
            //Making minimum and maximum Domain for the chart 

                this.coinMinimum = Math.min(...coinMinimumA)
                this.coinMaximum = Math.max(...coinMinimumA)

                //Setting up color for the chart depending on the market cap
            if (this.props.chartColor.cap24hrChange > 0) {
                this.chartPriceColorMain = "#689F38"
                this.chartColor = "#8BC34A"
                this.chartBorder = "#689F38"

            } else if (this.props.chartColor.cap24hrChange < 0) {
                this.chartPriceColorMain = "#F44336"
                this.chartColor = "#ff4c4c"
                this.chartBorder = "#D32F2F"
            }

            if (!this.state.loaded ) {
            this.setState({loaded: true})
          }

       //Intially when user does not scroll the value of selected coin is null and hence we ae giving to the current coin value
          if (!this.valueAtSelectedTime && this.props.chartColor["price_usd"]) {

              this.valueAtSelectedTime =  this.props.chartColor["price_usd"]
              this.selectedTime = new Date().toString()
              this.selectedTime = this.selectedTime.split(' ').slice(0, 5).join(' ');
          }
        } 

Вопрос: Может ли кто-нибудь посмотреть приведенный выше фрагмент кода и посмотреть, сможет ли он найти ошибку?

Вот гиф того, что происходит

ezgif com-video-to-gif 8

0 ответов

Другие вопросы по тегам