无法更新componentDidUpdate中的状态

Question

我正在制作一个基本的冠状病毒跟踪器应用程序，我的传入数据如下所示：

[
{
"provinceName": "Canada",
"confirmedCases": "66,780",
"probableCases": "0",
"deaths": "4,628"
},
{
"provinceName": "Newfoundland and Labrador",
"confirmedCases": "261",
"probableCases": "0",
"deaths": "3"
},
{
"provinceName": "Prince Edward Island",
"confirmedCases": "27",
"probableCases": "0",
"deaths": "0"
},
{
"provinceName": "Nova Scotia",
"confirmedCases": "1,008",
"probableCases": "0",
"deaths": "46"
},
{
"provinceName": "New Brunswick",
"confirmedCases": "120",
"probableCases": "0",
"deaths": "0"
},
{
"provinceName": "Quebec",
"confirmedCases": "36,150",
"probableCases": "0",
"deaths": "2,725"
},
{
"provinceName": "Ontario",
"confirmedCases": "19,944",
"probableCases": "0",
"deaths": "1,599"
},
{
"provinceName": "Manitoba",
"confirmedCases": "284",
"probableCases": "0",
"deaths": "7"
},
{
"provinceName": "Saskatchewan",
"confirmedCases": "544",
"probableCases": "0",
"deaths": "6"
},
{
"provinceName": "Alberta",
"confirmedCases": "6,098",
"probableCases": "0",
"deaths": "115"
},
{
"provinceName": "British Columbia",
"confirmedCases": "2,315",
"probableCases": "0",
"deaths": "127"
},
{
"provinceName": "Yukon",
"confirmedCases": "11",
"probableCases": "0",
"deaths": "0"
},
{
"provinceName": "Northwest Territories",
"confirmedCases": "5",
"probableCases": "0",
"deaths": "0"
},
{
"provinceName": "Nunavut",
"confirmedCases": "0",
"probableCases": "0",
"deaths": "0"
},
{
"provinceName": "Repatriated travellers",
"confirmedCases": "13",
"probableCases": "0",
"deaths": "0"
}
]

我将它呈现到React svg映射中，在那里我期望数据作为一个数组中的多个数组，如下所示：

data: [
["PE", 67],
["MB", 75],
["SK", 43],
["AB", 50],
["BC", 88],
["NU", 21],
["NT", 43],
["YT", 21],
["QC", 60],
["ON", 19],
["NB", 4],
["NS", 44],
["NF", 38],
],`enter code here`

我试图在从axios获取json后更新状态数据，我试图在componentDidUpdate中处理它，以获得所需的格式。但是，当我试图在componentDidUpdate((中设置状态时，它不起作用，我希望获取的数据采用上述格式。如何将dataArray设置为data(state(？

这是React级

import React, { Component } from "react";
import ChoroplethMap from "../ChoroplethMap";
import axios from "axios";
class Canada extends Component {
state = {
data: [
// ["PE", 67],
// ["MB", 75],
// ["SK", 43],
// ["AB", 50],
// ["BC", 88],
// ["NU", 21],
// ["NT", 43],
// ["YT", 21],
// ["QC", 60],
// ["ON", 19],
// ["NB", 4],
// ["NS", 44],
// ["NF", 38],
],
isLoaded: false,
rawdata: [],
isDataSet: false,
};
getData() {
axios
.get("http://localhost:8080/h3")
.then(response =>
response.data.map(data => ({
provinceName: `${data.provinceName}`,
confirmedCases: `${data.confirmedCases}`,
probableCases: `${data.probableCases}`,
deaths: `${data.deaths}`
}))
)
.then(rawdata => {
this.setState({
rawdata,
isLoaded: true
});
})
.catch(err => {
console.log(err);
});
}
componentDidMount() {
this.getData();
}
componentDidUpdate() {
if (this.state.isLoaded === true) {
let dataArray = [];
let insideArray;
this.state.rawdata.forEach(element => {
if (element.provinceName !== "Canada") {
insideArray = new Array();
var sexy = parseInt(element.confirmedCases.replace(",", ""));
var provinceName = element.provinceName;
if (provinceName === "New Brunswick") {
insideArray.push("NB");
insideArray.push(sexy);
} else if (provinceName === "Manitoba") {
insideArray.push("MB");
insideArray.push(sexy);
} else if (provinceName === "Newfoundland and Labrador") {
insideArray.push("NF");
insideArray.push(sexy);
} else if (provinceName === "Nova Scotia") {
insideArray.push("NS");
insideArray.push(sexy);
} else if (provinceName === "Saskatchewan") {
insideArray.push("SK");
insideArray.push(sexy);
} else if (provinceName === "Alberta") {
insideArray.push("AB");
insideArray.push(sexy);
} else if (provinceName === "Prince Edward Island") {
insideArray.push("PE");
insideArray.push(sexy);
} else if (provinceName === "Quebec") {
insideArray.push("QC");
insideArray.push(sexy);
} else if (provinceName === "Ontario") {
insideArray.push("ON");
insideArray.push(sexy);
} else if (provinceName === "British Columbia") {
insideArray.push("BC");
insideArray.push(sexy);
} else if (provinceName === "Yukon") {
insideArray.push("YT");
insideArray.push(sexy);
} else if (provinceName === "Northwest Territories") {
insideArray.push("NT");
insideArray.push(sexy);
} else if (provinceName === "Nunavut") {
insideArray.push("NU");
insideArray.push(sexy);
} else if (provinceName === "Northwest Territories") {
insideArray.push("NT");
insideArray.push(sexy);
}
dataArray.push(insideArray);
}
});
dataArray.pop();
if (this.state.isDataSet == false) {
this.setState({
data: [...this.state.data, ...dataArray],
isDataSet: true,
});
}
}
}
render() {
return (
<div
style={{
height: "100vh",
width: "100vw"
}}
>
<ChoroplethMap data={this.state.data} />
</div>
);
}
}
export default Canada;

Answer 1

原因是，无论何时在React或ES6类中定义函数，都需要执行以下任一操作：

1. 在构造函数中使用this.getData = this.getData.bind(this)将其绑定到上下文
2. 使用此语法，getData = () = { }

由于这些没有结合，

componentDidMount() {
this.getData();
}

此getData((从未运行并且

componentDidUpdate() {
if (this.state.isLoaded === true) {
....
}
}

这种情况从来都不是真正的

Answer 2

您应该只更新一次状态：
-接收数据，
–处理数据，
-设置状态

代码：

import React, { Component } from "react";
import ChoroplethMap from "../ChoroplethMap";
import axios from "axios";
class Canada extends Component {
constructor(props) {
super(props);
this.state = {
data: [
// ["PE", 67],
// ["MB", 75],
// ["SK", 43],
// ["AB", 50],
// ["BC", 88],
// ["NU", 21],
// ["NT", 43],
// ["YT", 21],
// ["QC", 60],
// ["ON", 19],
// ["NB", 4],
// ["NS", 44],
// ["NF", 38],
],
isLoaded: false,
rawdata: [],
isDataSet: false,
};
this.getData = this.getData.bind(this);
this.getData = this.processRawData.bind(this);
}

getData() {
axios
.get("http://localhost:8080/h3")
.then(response =>
response.data.map(data => ({
provinceName: `${data.provinceName}`,
confirmedCases: `${data.confirmedCases}`,
probableCases: `${data.probableCases}`,
deaths: `${data.deaths}`
}))
)
.then(rawdata => {
// === Right here process the data ===
let data = this.rocessRawData(rawdata);
// === =========================== ===
this.setState({
rawdata,
data,
isLoaded: true
});
})
.catch(err => {
console.log(err);
});
}
componentDidMount() {
this.getData();
}

processRawData(rawdata)
{
let dataArray = [];
let insideArray;
rawdata.forEach(element => {
if (element.provinceName !== "Canada") {
insideArray = new Array();
var sexy = parseInt(element.confirmedCases.replace(",", ""));
var provinceName = element.provinceName;
if (provinceName === "New Brunswick") {
insideArray.push("NB");
insideArray.push(sexy);
} else if (provinceName === "Manitoba") {
insideArray.push("MB");
insideArray.push(sexy);
} else if (provinceName === "Newfoundland and Labrador") {
insideArray.push("NF");
insideArray.push(sexy);
} else if (provinceName === "Nova Scotia") {
insideArray.push("NS");
insideArray.push(sexy);
} else if (provinceName === "Saskatchewan") {
insideArray.push("SK");
insideArray.push(sexy);
} else if (provinceName === "Alberta") {
insideArray.push("AB");
insideArray.push(sexy);
} else if (provinceName === "Prince Edward Island") {
insideArray.push("PE");
insideArray.push(sexy);
} else if (provinceName === "Quebec") {
insideArray.push("QC");
insideArray.push(sexy);
} else if (provinceName === "Ontario") {
insideArray.push("ON");
insideArray.push(sexy);
} else if (provinceName === "British Columbia") {
insideArray.push("BC");
insideArray.push(sexy);
} else if (provinceName === "Yukon") {
insideArray.push("YT");
insideArray.push(sexy);
} else if (provinceName === "Northwest Territories") {
insideArray.push("NT");
insideArray.push(sexy);
} else if (provinceName === "Nunavut") {
insideArray.push("NU");
insideArray.push(sexy);
} else if (provinceName === "Northwest Territories") {
insideArray.push("NT");
insideArray.push(sexy);
}
dataArray.push(insideArray);
}
});
dataArray.pop();
return dataArray;
}
render() {
return (
<div
style={{
height: "100vh",
width: "100vw"
}}
>
<ChoroplethMap data={this.state.data} />
</div>
);
}
}
export default Canada;