Не могу прочитать информацию о неопределенности - ReactJS - PullRequest
Новая
       1

Не могу прочитать информацию о неопределенности - ReactJS

0 голосов
/ 12 сентября 2018

Я получаю эту ошибку: TypeError: Невозможно прочитать свойство 'значение' из неопределенного

Код получает объект в начале, получает уникальные значения и подсчитывает их количество. Затем я пытаюсь получить доступ к объекту, но его высказывание не определено.

Это вывод на консоль. 

    (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 === "Online") 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>
        )
    }
}

1 Ответ

0 голосов
/ 12 сентября 2018

Ваш цикл for в функции handleCountingServers должен иметь значение

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

До того, как вы получили доступ к newArr [newArr.length].

И так как индексы массива начинаются с 0к длине массива - 1, вы пытались получить доступ к свойству значения undefined.

Надеюсь, это поможет.

...