Question

我正在使用chartjs，并尝试通过如下所示的API调用来更新我的初始状态：

this.state = {
      data: {
        labels: [], //<-- SET THIS STATE
        datasets: [{
            fill: 'false',
            lineTension: 0,
            label: 'Price in USD',
            data: [], //<-- SET THIS STATE
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    }
}

我需要为标签设置setState-我已经完成了。但是同时对于下面的代码的setState也感到迷茫和困惑。

data: {
        labels: [],
        datasets: [{
            fill: 'false',
            lineTension: 0,
            label: 'Price in USD',
            data: [], <------THISSSS

这就是我设置标签状态的方法

let labels = this.state.data.labels
          labels = timeData
          this.setState(({data}) => ({data: {
            ...data,
            labels: labels
          }}))

Answer 1

您将标签初始化为this.state.data.labels，这很好，但是随后将其更改为timeData，我假设它在代码的其他地方声明。如果您要在之后立即为其分配新值，则无需将标签设置为this.state.data.labels。另外，如果您想进一步简化它，还可以排除行labels = timeData，而只在setState调用中使用timeData。

对于this.setState()调用，您不应将其传递给函数。

要回答您的问题，这是如何设置标签状态和第二个数据属性，而又不影响其余状态：

this.setState({
    data: {
        labels: timeData,
        datasets: [{
            ...this.state.data.datasets,
            data: SOME_VALUE_HERE
        }]
    }
});

如何为嵌套对象设置状态

1 个答案: