无法对未安装的组件执行 React 状态更新，使用 class 组件并且组件已安装

Question

我有如下特定代码:-

class BarChart extends Component {
  constructor(){
    super();
    this.state = {
      chartData:{}
    }
  }

  componentDidMount() {
    this.getChartData();
  }

  getChartData() {
    axios.get("http://localhost:5001/inventory/clusterscount").then(res => {
        const myresponse = res.data;
        console.log(myresponse)
        let countcluster = [];
        let listregion = [];
        for (const dataobj of myresponse){
            countcluster.push(parseInt(dataobj.clusterscount));
            listregion.push(dataobj.region);
        }
        console.log(countcluster)
        console.log(listregion)
        this.setState({
          chartData: {
            labels:listregion,
            datasets: [
              {
                label: "level of thiccness",
                data: countcluster,
                backgroundColor: ["rgba(75, 192, 192, 0.6)"],
                borderWidth: 4
              }
            ]
          }
        });
      });
    }

  render(){
        return (
            <div className="App">
              <h1>Dankmemes</h1>
              <div>
                <Line
                  data={this.state.chartData}
                  options={{
                    responsive: true,
                    title: { text: "THICCNESS SCALE", display: true },
                    scales: {
                      yAxes: [
                        {
                          ticks: {
                            autoSkip: true,
                            maxTicksLimit: 10,
                            beginAtZero: true
                          },
                          gridLines: {
                            display: false
                          }
                        }
                      ],
                      xAxes: [
                        {
                          gridLines: {
                            display: false
                          }
                        }
                      ]
                    }
                  }}
                />
              </div>
            </div>
          );
    
        }     
    }
export default BarChart;

现在运行它正在获得所需的集群和区域，如下所示：-

0: {clusterscount: '2', region: 'test1'}
1: {clusterscount: '10', region: 'test2'}
2: {clusterscount: '8', region: 'test3'}
3: {clusterscount: '1', region: 'test4'}
4: {clusterscount: '8', region: 'test5'}
5: {clusterscount: '2', region: 'test6'}

我也可以获得 clustercount 和 listregion 的结果，但一直出现此错误。我尝试了很多东西，但没有想法。

但是在日志中我得到如下：-

有人可以帮我解决这个问题吗？

Answer 1

react useEffect 需要一个清除函数来取消订阅和异步任务，因此我们需要检查组件是否已挂载，我们可以通过多种方法来做到这一点，react 社区对此有很好的解决方案。

const LineChart = () =>{
    const [chartData,setChartData]= useState({});
    const [myresponse, setmyresponse] =useState([]);
  const isMountedRef = useRef(null);
    useEffect(() =>{
    isMountedRef.current = true;
        let countcluster = [];
        let listregion = [];
        axios.get("http://localhost:5001/inventory/clusterscount").
        then(res=>{
           if(isMountedRef.current){
   const myresponse= res.data;
            setmyresponse(myresponse)
            console.log(myresponse);
         for (const dataobj of myresponse){
             countcluster.push(parseInt(dataobj.clusterscount));
             listregion.push(dataobj.region);
         }
         setChartData({
            labels: listregion,
            datasets: [
              {
                label: "level of thiccness",
                data: countcluster,
                backgroundColor: ["rgba(75, 192, 192, 0.6)"],
                borderWidth: 4
              }
            ]
          });
     
        }
        
         
        })
    .catch(err=>{
        console.log(err);
    });
    return () => isMountedRef.current = false;
    },[])

无法对未安装的组件执行 React 状态更新，使用 class 组件并且组件已安装

Can't perform a React state update on an unmounted component, using class component and component did mount

components

reactjs