React 组件不会在更新状态时更新

里蒂克·库马尔

Map.js

import React, { Component } from "react";
import DatamapsIndia from "react-datamaps-india";

class Map extends Component {
  state = { };
  render() {
    console.log("checkbox value",this.props.checkbox)  //correctly updating on clicking on checkbox
    return (    
        this.props.checkbox ? 
        <DatamapsIndia
          regionData={{
            Maharashtra: {
              value: 10,
            },
          }}
        //   hoverComponent={({ value }) => {
        //     return <span>{value}</span>;
        //   }}
          mapLayout={{
            title: "Covid Map",
            legendTitle: "Active Cases",
            startColor: "#FFDAB9",
            endColor: "#FF6347",
            hoverTitle: "Count",
            noDataColor: "#f5f5f5", // this is the variable that has to change on changing of checkbox value
            borderColor: "#8D8D8D",
            hoverBorderColor: "#8D8D8D",
            hoverColor: "green",
          }}
        /> :
        <DatamapsIndia
        regionData={{
          Maharashtra: {
            value: 10,
          },
        }}
      //   hoverComponent={({ value }) => {
      //     return <span>{value}</span>;
      //   }}
        mapLayout={{
          title: "Covid Map",
          legendTitle: "Active Cases",
          startColor: "#FFDAB9",
          endColor: "#FF6347",
          hoverTitle: "Count",
          noDataColor: "#f24f22", // this is the variable that has to change on changing of checkbox value
          borderColor: "#8D8D8D",
          hoverBorderColor: "#8D8D8D",
          hoverColor: "green",
        }}
      />
    );
  }
}

export default Map;

App.js

import logo from "./logo.svg";
import "./App.css";
import React, { Component } from "react";
import Header from "./Components/Header";
import Body from "./Components/Body";
import Map from "./Components/Map";

class APP extends Component {
  state = {
    checkbox: false,
  };
  constructor(props) {
    super(props);
    this.checkBoxfunction = this.checkBoxfunction.bind(this);
  }

  checkBoxfunction() {
    var check = document.getElementById("customSwitch2").checked;
    this.setState(
      {
        checkbox: check,
      },
      () => {
        console.log(this.state.checkbox);
      }
    );
  }

  componentDidMount() {
    console.log("CheckBox Updation(APP.JS) Mount", this.state.checkbox);
    this.checkBoxfunction();
  }

  render() {
    return (
      <div className="App">
        <Header
          checkbox={this.state.checkbox}
          checkBoxfunction={this.checkBoxfunction}
        />
        <div className="d-flex flex-column">
          <div className="map" style={{ width: "70%" , position:"absolute", right:"10px", top:"130px"}}>
            <Map checkbox={this.state.checkbox} />
          </div>
          <div className="table" style={{ width: "30%"}}>
            <Body checkbox={this.state.checkbox} />
          </div>
        </div>
      </div>
    );
  }
}

export default APP;

在这里，我将复选框值传递给 Map 组件，我希望每当复选框的状态发生变化时都会更新“NoDatacolor”值，但事情不是按照我想要的方式进行的。即使更改复选框状态，我的地图“noDataColor”也保持不变，但地图组件中的控制台行每次单击时都会更新复选框的正确值。

严格的

<DatamapsIndia {...args} />处理它的道具可能是不可变的，我曾leaflet遇到过类似的问题，在这里您可以找到有关它的信息。

您可以尝试以下肮脏的解决方案：

const { checkbox } = this.props;
...
<DatamapsIndia
  ...
  key={`${checkbox}`}
  ...
  mapLayout={{
    ...
    noDataColor: checkbox ? "#f5f5f5" : "#f24f22",
    ...
  }}
/>

希望这有效，请让我知道。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。