0

всем привет есть проблема с хуком в моем коже у ма не приложу что делать

есть одно состояние options даю ему свойство по умолчанию при создание хука useState далее использую хук useEffect в нем делаю работа с данными и обновляю состояние options

состояние options меняется в рендоре это видно но в функции onClickBar состояние options прежнее оно не изменяеться

помогите прошу

import React, {useState,useEffect,} from 'react'
import CanvasJSReact from '../../../../../lib/canvasjs/canvasjs.react'
import moment from 'moment'
import PropTypes from 'prop-types'

let CanvasJSChart = CanvasJSReact.CanvasJSChart

const Subscribers=({typeResurs})=>{

let ParseDate=()=>{
    let data =[]
    for (let i = 0;i<18;i++){
        let rand = Math.random() * (1000 + 1)

        data.push(
            { label: moment().add(-i,'month').format('MM.YY'), active:false, y: Math.floor(rand)  }
        )
    }
    data[0].color = typeResurs==='Gas'? '#00ffde':typeResurs==='HotWater'?'#db8c8c':
        typeResurs==='ColdWater'?'#9cdcf9':'#ffdfab'
    data[0].active=true
    return data
}

let [options, setOptions] = useState(
    {
        animationEnabled: true,
        backgroundColor: '#161C30',
        height: 144,
        axisX: {
            // interval: 1,
            labelFontColor: '#FFFFFF',
            labelFontSize:12
        },
        axisY: {
            gridColor: '#353535',
            labelFontColor: '#FFFFFF',
            lineThickness: 0,
            tickColor: '#353535',
            labelFontSize:12

        },

        data: []
    }
)

let onClickBar=(e)=>{
    let dataBar ={...options}
    let data =dataBar.data[0].dataPoints
    let indexActive = data.findIndex((el)=> el.active ===true)
    data[indexActive].active=false
    data[indexActive].color=''

    let index = e.dataPointIndex
    data[index].active=true
    data[index].color=typeResurs==='Gas'? '#00ffde':typeResurs==='HotWater'?'#db8c8c':
        typeResurs==='ColdWater'?'#9cdcf9':'#ffdfab'
    dataBar.data[0].dataPoints=data
    setOptions(dataBar)

}

useEffect(()=>{
    let data ={...options}
    data.data=[{
        type: 'column',
        axisXIndex: 0,
        click: onClickBar,

        showInLegend: false,
        color: typeResurs==='Gas'? '#01A692':typeResurs==='HotWater'?'#EB5757':
            typeResurs==='ColdWater'?'#1F78B4':'#FFBC57',
        dataPoints: ParseDate().reverse()
    }]

    setOptions(data)
},[typeResurs])
return(
    <div className='Dashboard'>
        <div className='contebt-box-panel'>
            <p className='titleGrav'>
                Количество абонентов по месяцам
            </p>
            <CanvasJSChart options={options}/>
        </div>
    </div>
)
}
Subscribers.propTypes = {
   typeResurs: PropTypes.string
}
export default Subscribers
3
  • Попробуйте добавить функцию как зависимость в useEffect [onClickBar, typeResurs]
    – ZiiMakc
    22 апр 2020 в 19:27
  • Спасибо за ответ но не помогло начал постояно рендарить новые данные 23 апр 2020 в 4:13
  • в useCallback оберните функцию.
    – ZiiMakc
    23 апр 2020 в 8:37

1 ответ 1

0

решил проблему правда на сколько правильно не знают

import React, {useState,useEffect,} from 'react'
import CanvasJSReact from '../../../../../lib/canvasjs/canvasjs.react'
import moment from 'moment'
import PropTypes from 'prop-types'

let CanvasJSChart = CanvasJSReact.CanvasJSChart

let Subscribers =(props)=>{
let [options,setOpttions]= useState({
    animationEnabled: true,
    backgroundColor: '#161C30',
    height: 144,
    axisX: {
        // interval: 1,
        labelFontColor: '#FFFFFF',
        labelFontSize:12
    },
    axisY: {
        gridColor: '#353535',
        labelFontColor: '#FFFFFF',
        lineThickness: 0,
        tickColor: '#353535',
        labelFontSize:12

    },
    data: []
})

let addData=()=>{
    let {typeResurs}=props
    let dataBar = {...options}
    dataBar.data[0]={
        type: 'column',
        axisXIndex: 0,
        click: onClickBar,

        showInLegend: false,
        color: typeResurs==='Gas'? '#01A692':typeResurs==='HotWater'?'#EB5757':
            typeResurs==='ColdWater'?'#1F78B4':'#FFBC57',
        dataPoints:ParseDate().reverse()
    }
    setOpttions(dataBar)
}
let ParseDate=()=>{
    let {typeResurs}=props

    let data =[]
    for (let i = 0;i<18;i++){
        let rand = Math.random() * (1000 + 1)

        data.push(
            { label: moment().add(-i,'month').format('MM.YY'), active:false, y: Math.floor(rand)  }
        )
    }
    data[0].color = typeResurs==='Gas'? '#00ffde':typeResurs==='HotWater'?'#db8c8c':
        typeResurs==='ColdWater'?'#9cdcf9':'#ffdfab'
    data[0].active=true
    return data
}
let onClickBar=(e)=>{
    let {typeResurs}=props
    let dataBar ={...options}
    let data =dataBar.data[0].dataPoints
    let indexActive = data.findIndex((el)=> el.active ===true)
    data[indexActive].active=false
    data[indexActive].color=''

    let index = e.dataPointIndex
    data[index].active=true
    data[index].color=typeResurs==='Gas'? '#00ffde':typeResurs==='HotWater'?'#db8c8c':
        typeResurs==='ColdWater'?'#9cdcf9':'#ffdfab'
    dataBar.data[0].dataPoints=data
    setOpttions(dataBar)

}
useEffect(()=>{
    addData()
},[props.typeResurs])


return(
    <div className='Dashboard'>
        <div className='contebt-box-panel'>
            <p className='titleGrav'>
                    Количество абонентов по месяцам
            </p>
            <CanvasJSChart options={options}/>
        </div>
    </div>
)


}
Subscribers.propTypes = {
typeResurs: PropTypes.string.  
}
export default Subscribers

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.