Question

我收到此错误：TypeError：无法读取未定义的属性'value'

代码在开始时获取对象，并获取唯一值并计算它们的数量。然后，我试图访问该对象，但它说的是未定义的。

这是控制台的输出。

    (3) ["Online", "Offline", "Warning"]
ServerCount.jsx:69 (3) [{…}, {…}, {…}]0: {value: "Online", count: 1}1: {value: "Offline", count: 1}2: {value: "Warning", count: 1}length: 3__proto__: Array(0)
ServerCount.jsx:76 {value: "Online", count: 1}
ServerCount.jsx:76 {value: "Offline", count: 1}
ServerCount.jsx:76 {value: "Warning", count: 1}

将其标记为错误：

77 | if（newArr [i] .value ===“在线”）arr.Online = newArr [i] .count

我似乎无法弄清楚问题出在哪里，有没有简单的方法可以解决它，还是需要重新设计代码？

    // This is the data that is getting pushed down - its working fine.


     class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      servers: [
        {
          host: "192.168.57.108",
          status: "Online",
          title: "Server",
          location: "Location"
        },
        {
          host: "192.168.57.71",
          status: "Offline",
          title: "Server",
          location: "Location"
        },
        {
          host: "192.168.57.90",
          status: "Warning",
          title: "Server",
          location: "Location"
        }
      ]
    };
    this.handleFormData = this.handleFormData.bind(this);
    this.handleStatusExtract = this.handleStatusExtract.bind(this);
    this.handleUserClick = this.handleUserClick.bind(this);
  }

  handleFormData(data) {
    let newState = this.state.servers.slice();
    newState.push(data);

    this.setState({
        servers: newState
    });
  }

  handleStatusExtract() {
    let arr = this.state.servers
    return arr.map(server => server.status);
  }

  handleUserClick(data) {
    let index = this.state.servers.findIndex(server => server.host === data)
    this.setState({
      servers: this.state.servers.filter((_, i) => i !== index)
    })
  }

  render() {
    return (
      <Default>
        <div className="upperContainer">
          <ServerCount serverCount={this.handleStatusExtract()} />
          <RequestTimer />
        </div>
        <ServerList serverList={this.state.servers} handleUserClick={this.handleUserClick}/>
        <Input handleFormData={this.handleFormData} />
      </Default>
    );
  }
}
    class ServerCount extends Component {

    constructor(props) {
        super(props);

        this.state = {
            Total: 0,
            Online: 0,
            Warning: 0,
            Offline: 0
        };

        this.compressArray = this.compressArray.bind(this);
        this.handleCountingServers = this.handleCountingServers.bind(this);
    }

    componentDidUpdate(prevProps) {
        if(prevProps.serverCount !== this.props.serverCount) {
            this.handleCountingServers();
        }
    }

    componentDidMount() {
        this.handleCountingServers();
    }

    compressArray(original) {

        let compressed = [];
        let copy = original.slice(0);

        for (let i = 0; i < original.length; i++) {

            var myCount = 0;    
            for (let w = 0; w < copy.length; w++) {
                if (original[i] === copy[w]) {
                    myCount++;
                    delete copy[w];
                }
            }

            if (myCount > 0) {
                let a = {};
                a.value = original[i];
                a.count = myCount;
                compressed.push(a);
            }
        }

        return compressed;
    }

    handleCountingServers() {
        let prevArr = this.props.serverCount;
        console.log(prevArr)
        let newArr = this.compressArray(prevArr);
        console.log(newArr);
        let arr = {
            Online: 0,
            Warning: 0,
            Offline: 0
        };
        for(var i = 0; i <= newArr.length; i++) {
            console.log(newArr[i])
            if(newArr[i].value === "Online") arr.Online = newArr[i].count
            if(newArr[i].value === "Warning") arr.Warning = newArr[i].count
            if(newArr[i].value === "Offline") arr.Offline = newArr[i].count
        }
        this.setState({
            Online: arr.Online,
            Offline: arr.Offline,
            Warning: arr.Warning
        })
    }

    render() {
        return (
            <CountContainer>
                <div className="circleContainer">
                    <div className="total serverCircle">
                        {this.state.Total}
                    </div>
                    Total
                </div>
                <div className="circleContainer">
                    <div className="Online serverCircle">
                        {this.state.Online}
                    </div>
                    Online
                </div>
                <div className="circleContainer">
                    <div className="Warning serverCircle">
                        {this.state.Warning}
                    </div>
                    Warning
                </div>
                <div className="circleContainer">
                    <div className="Offline serverCircle">
                        {this.state.Offline}
                    </div>
                    Offline
                </div>
            </CountContainer>
        )
    }
}

Answer 1

handleCountingServers函数中的for循环应为

for (var i = 0; i < newArr.length; i++)

在您访问newArr [newArr.length]之前。

并且由于数组索引的范围是从0到数组长度-1，因此您试图访问undefined的value属性。

希望这会有所帮助。

无法读取未定义的属性-ReactJS

1 个答案: