用 Api 反应本机更新 State

Question

   0

嗨，我正在尝试从 API 更新 state 数据值（数据：[]）。 问题来自突出显示的行 this.setState({data.datasets[0].data.data:response.data.rates.AUD})

    import React from 'react';
import {Bar} from 'react-chartjs-2';
import axios from 'axios';

class App extends React.Component {

constructor(props) {
    super(props)
    this.state = {
        data: {
            labels:["UK"],
            datasets:[
            {label:"Dev Test",data:[]}
            ]
}}

this.test = this.test.bind(this)
}
 async test() {
    const response = await axios.get("https://api.exchangeratesapi.io/latest")
    this.setState({data.datasets[0].data[0]:response.data.rates.AUD})
    
}

Answer 1

这可能会有所帮助

this.setState({data: {
  ...this.state.data,
  datasets: [
    {
      label: this.state.data.datasets[0].label,
      data: response.data.rates.AUD,
    }
  ],
});

Answer 2

我认为问题在于您正在尝试更新 object 中的属性值，并且您必须为整个data属性执行此操作：

 this.setState({data: {...this.state.data, datasets: [ { label: this.state.data.datasets[0].label, data: response.data.rates.AUD, } ], });

我实际上并不认为我写的这段代码是正确的，因为我不了解您的数据结构，但想法是您必须将整个data state 一起更新，保留您想要保留的旧数据并更新新数据数据。 您不能直接更新 object 中数组中的属性。 不过，您可以单独更新第一级属性。 检查这个：https://itnext.io/react-setstate-usage-and-gotchas-ac10b4e03d60