ComponentDidMount之外的状态似乎未更新

Question

您好，当我在控制台上记录我的组件在componentDidMount方法之外的任何地方的状态时，我得到的结果是我的状态充满了空数组，而这些空数组应该已经构建好了。我从一个JSON文件中获取数据，在componentDidMount中，我可以看到状态变成了包含数据的数组，但是在其他地方，比如在我的渲染中，状态又回到了初始状态。

我想这个问题与组件的生命周期有关，所以我很想知道发生了什么。

非常感谢！

import React from 'react';
import * as metrics from './metrics.json';

class MetricsTable extends React.Component {
    state = {
        coverages: [],
        speeds: [],
        qualities: [],
        responsiveness: [],
        securities: []
    }

    componentDidMount() {
        metrics[0].map((metric) => {
            
            if (metric.level_1 === 'Coverage') {
                let joined = this.state.coverages.splice(0, 0, metric)
                this.setState({ coverages: [...joined] })
            }

            if (metric.level_1 === 'Speed') {
                let joined = this.state.speeds.splice(0, 0, metric)
                this.setState({ speeds: [...joined] })
            }

            if (metric.level_1 === 'Quality') {
                let joined = this.state.qualities.splice(0, 0, metric)
                this.setState({ qualities: [...joined] })
            }

            if (metric.level_1 === 'Responsiveness') {
                let joined = this.state.responsiveness.splice(0, 0, metric)
                this.setState({ responsiveness: [...joined] })
            }
            
            if (metric.level_1 === 'Security') {
                let joined = this.state.securities.splice(0, 0, metric)
                this.setState({ securities: [...joined] })
            }
        })
    }
    
    render() {
        // when I console log on this line I get empty arrays for my state
        return (
            <div>
                // this following line displays my state with empty arrays
                <pre>{JSON.stringify(this.state)}</pre>
                hello
            </div>
        );
        
    }
    
}

export default MetricsTable;

第一张图片显示了具有包含数据的数组的状态，这一张是在componentDidMount中通过控制台记录的。

第二张图片是渲染函数中this.state的控制台日志

​

​

​

Answer 1

问题与这类代码有关：

let joined = this.state.coverages.splice(0, 0, metric)

请注意，joined始终是一个空数组。splice方法不返回新的结果数组。

您可以像这样更新代码：

let joined = [...this.state.coverages, metric];

Answer 2

我用钩子重写了上面的代码。

import React, { useState, useEffect } from "react";

let metrics = [
  [
    [
      {
        level_1: "Coverage",
        name: "Coverage_1"
      }
    ],
    [
      {
        level_1: "Speed",
        name: "Speed_1"
      }
    ]
  ]
];
const MetricsTable = () => {
  const [coverages, setcoverages] = useState([]);
  const [speeds, setspeeds] = useState([]);
  const [qualities, setqualities] = useState([]);
  const [responsiveness, setresponsiveness] = useState([]);
  const [securities, setsecurities] = useState([]);

  useEffect(() => {
    metrics[0].map((metric) => {
      console.log("metric = ", metric);
      if (metric[0].level_1 === "Coverage") {
        setcoverages(coverages.concat(metric));
      }

      if (metric[0].level_1 === "Speed") {
        setspeeds(speeds.concat(metric));
      }

      if (metric[0].level_1 === "Quality") {
        setqualities(qualities.concat(metric));
      }

      if (metric[0].level_1 === "Responsiveness") {
        setresponsiveness(responsiveness.concat(metric));
      }

      if (metric[0].level_1 === "Security") {
        setsecurities(securities.concat(metric));
      }
    });
  }, []);

  return (
    <div>
      coverages:{coverages.length}
      <br />
      speeds:{speeds.length}
      <br />
      qualities:{qualities.length}
      <br />
      responsiveness:{responsiveness.length}
      <br />
      securities :{securities.length}
    </div>
  );
};

export default MetricsTable;

我认为指标是sample

​

为什么要删除连接？例如

var fruits = [];

var t= fruits.splice(0, 0, [{name:"Kiwi",id:"1"}]);
 console.log("t = ",t)

t is empty.and fruits not empty且包含数据。