Установите значения состояния объекта с помощью метода setState

У меня есть объект как переменная состояния в React. Я хочу изменить его различное значение, используя метод setState, но он отображается. Хотя я могу установить его с помощью метода this.state, но я думаю, что это неправильный способ.

Как я могу это сделать?


 this.state={
            graphData:{
                labels:['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'],
                datasets:[
                    {
                    label:"Day",
                    backgroundColor:"#F6ABE4",
                    borderColor:'#333',
                    borderWidth:2,
                    lineTension:0.1,
                    fill:true,
                    data:[4,5,6,7,8,9,10,11,12,1,2,3,4]
            
                    }
            
            
                ]
            }
}


 this.setState({[graphData.datasets[0].backgroundColor]:"#F6ABE4"})



this.setState((state) => ({
                    graphData : {
                        ...state.graphData ,
                        datasets : [
                
                            // First slice of array before the index we want to change
                            ...state.graphData.datasets.slice(0, 5),
                
                            // changing the element on the given index
                            {
                                ...state.graphData.datasets[0] ,
                                // you can modify all the properties you want
                                data : result // <------ CHANGE HERE
                            },
                
                            // rest of the array elements after index
                            ...state.graphData.datasets.slice(6+1)
                        ]
                    }
                }))

reactjs typescript react-lifecycle
person Pranay kumar    schedule 20.05.2020    source источник
comment
Вы можете использовать что-то вроде github.com/immerjs/immer, что облегчит вам задачу.   -  person Harish    schedule 21.05.2020

Ответы (2)


arrow_upward
1
arrow_downward

Вот, вы можете сделать что-то вроде этого:

this.setState((state) => ({
    graphData : {
        ...state.graphData ,
        datasets : [

            // First slice of array before the index we want to change
            ...state.graphData.datasets.slice(0, index),

            // changing the element on the given index
            {
                ...state.graphData.datasets[index] ,
                // you can modify all the properties you want
                backgroundColor : "#F6ABE4" // <------ CHANGE HERE
            },

            // rest of the array elements after index
            ...state.graphData.datasets.slice(index+1)
        ]
    }
}))

Надеюсь, комментарии к коду развеют сомнения

person Vivek Doshi    schedule 20.05.2020
comment
Для изменения данных внутри наборов данных я обновляю код таким образом. Но это не сработало. - person Pranay kumar; 21.05.2020
comment
Можете ли вы подсказать, каково значение индекса для обновления массива данных внутри наборов данных? Я пытаюсь с «5». - person Pranay kumar; 21.05.2020
comment
@Pranaykumar, да, так что он обновит backgroundColor : "#F6ABE4" из datasets[5], поскольку вы обновили вопрос, он должен быть (5+1), а не (6+1), и вы должны взять переменную индекса, например var index = 5, и обновлять только там - person Vivek Doshi; 21.05.2020

arrow_upward
0
arrow_downward

Вы также можете попробовать это:

const { graphData } = this.state;
graphData.datasets[0].backgroundColor = "#F6ABE4";
this.setState({ 
   graphData
})
person Vicky    schedule 21.05.2020