使用 setState 方法设置对象的状态值答案

【问题标题】：Set object values of state using setState method使用 setState 方法设置对象的状态值
【发布时间】：2020-05-20 14:17:28
【问题描述】：

我在 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)
                        ]
                    }
                }))

【问题讨论】：

您可以使用 github.com/immerjs/immer 之类的内容，这会让您轻松完成。

标签： reactjs typescript react-lifecycle

【解决方案1】：

给你，你可以做这样的事情：

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)
        ]
    }
}))

希望代码cmets能解开疑惑

【讨论】：

为了更改数据集中的数据，我以这种方式更新代码。但它没有用。
您能否建议，更新数据集中的“数据”数组的索引值是多少？我尝试使用“5”。
@Pranaykumar，是的，所以它会更新 backgroundColor : "#F6ABE4" 的 datasets[5] ，当您更新问题时，它应该是 (5+1) 而不是 (6+1)，并且您应该使用像 var index = 5 这样的索引变量和只更新那里

【解决方案2】：

你也可以试试这个：

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

【讨论】：