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

您只能更新一次状态：
-接收数据，
-处理它，
-设置状态

代码：

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;

Answer 2

好吧，原因是，通常每当您在React或ES6类中定义一个函数时，都需要执行以下任一操作：

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

由于那些未绑定，

componentDidMount() {
    this.getData();
}

此getData（）永远不会运行，并且

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

这种情况永远都不成立

无法更新componentDidUpdate中的状态

2 个答案: