Состояние реакции не определено после проверки на неопределенность - PullRequest
Новая
       2

Состояние реакции не определено после проверки на неопределенность

1 голос
/ 23 марта 2020

, поэтому я работал над этим приложением React. 

import React, { PureComponent } from "react";
import axios from "axios";

const serverLocation = require("../config/keys.js").server;

var data = [];

export default class StanjeNaCestah extends React.Component {
    state = {
        datag: [],
        finished: false
    };

    componentDidMount() {
        axios.get(`${serverLocation}/api/content/road-conditions`).then(res => {
            this.setState(
                {
                    datag: res.data
                },
                function() {
                    console.log("Datag updated");
                    console.log(this.state);
                    this.setState(
                        {
                            finished: true
                        },
                        () => {
                            console.log("Finished true");
                        }
                    );
                }
            );
            for (var key in this.state) {
                data.push(this.state[key]);
            }
        });
    }

    componentWillUpdate() {
        console.log("WillUpdating");
        console.log(this.state);
    }

    render() {
        console.log("Render called");
        console.log(this.state.datag.items);
        //const itemz = this.state.datag.items.map((item, key) => <h3>{item}</h3>);
        let numbers;
        //numbers = this.state.datag.items;
        if (this.state.datag.items) {
            numbers = this.state.datag.items.forEach(item => {
                console.log("Iterating through for item " + item.title);
                return <div>{item.title}</div>;
            });
        }
        console.log("Logging numbers");
        console.log(numbers);
        return <ul>{numbers}</ul>;
        /*return (
            <div className="container">
                <div className="col-xs-8">
                    <h1>{this.state.datag.title}</h1>
                    {itemz}
                </div>
            </div>
        );*/
    }
}

Проблема в коде рендера. Как видите, я проверяю, что this.state.datag.items не определен. Console.log, который я вызываю во 2-й строке функции, возвращает действительное значение. Но позже, когда я записываю числа, он возвращает неопределенное. Часть в forEach записывает действительное значение ... У меня закончились идеи, что здесь может быть не так, пожалуйста. Помощь.

1 Ответ

1 голос
/ 23 марта 2020

Проблема, с которой вы сталкиваетесь, заключается в том, что Array.prototype.forEach не возвращает значение. Я подозреваю, что учитывая код, который вы написали, вы ищете Array.prototype.map.

Согласно документации MDN для Array.prototype.forEach:

Возвращаемое значение

undefined

            numbers = this.state.datag.items.map(item => {
                console.log("Iterating through for item " + item.title);
                return <div>{item.title}</div>;
            });
...