React почему свойство объекта возвращает undefined?

Question

[igotDiamonds]

есть вот такой объект, мне с него надо получить значение свойства "fields", т.е массив и методом .map отрендерить элементы

Вот реализация

get formData() {
        return this.props.deliveryFormData.payload.form;
    }

    render() {
        console.log(Object.entries(this.formData))
        return (
            <form name="delivery-form" type="post" action="/api/v1/shipping/submit_form" onSubmit={this.handleFormSubmit}>
                {
                    this.formData.fields.map(e => console.log(e.label))
                }
            </form>
        )
    }

this.formData.fields - undefined, хотя
console.log(this.formData.fields)
показывает массив

Comments

[IDONTSUDO]

Скинь полный код компонента

[igotDiamonds]

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { mapDispatchToProps } from 'client/utils/redux';
import { InputTextField } from './input';
import { Label } from './label';

@connect(
    (state) => ({
        deliveryFormData : state.api.commerce.deliveryFormData
    }),
    mapDispatchToProps(['commerce'])
)
export class DynamicForm extends Component {

    constructor(props) {
        super(props);
        this.load();
        this.state = {};
    }



    load = (ev) => {
        ev && ev.preventDefault();
        this.props.actions.commerce.getDeliveryFormData();
    }

    _handleChange = event => {

    }

    handleFormSubmit(e) {
        e.preventDefault();
        let form = document.forms.namedItem("delivery-form")
        let userData = new FormData(form)
        console.log(e.target[0].value)


        fetch("http://nbrstage2.folz.de/api/v1/shipping/submit_form", {
            method: "POST",
            body: JSON.stringify(userData),
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            }
        }).then(response => {
            response.json().then(data => {
                console.log("Successful" + data.errors);
            });
        });
    }

    submitForm = event => {
        event.preventDefault();
        // const formData = new FormData(event);
        console.log(this.formData.fields);
        this.formData.fields.map(e => {
            console.log(e.label);
        })
    }

    get formData() {
        return this.props.deliveryFormData.payload.form;
    }

    render() {
        console.log(Object.entries(this.formData))
        return (
            <form name="delivery-form" type="post" action="/api/v1/shipping/submit_form" onSubmit={this.handleFormSubmit}>
                {
                    this.formData.fields.map(e => console.log(e.label))
                }
            </form>
        )
    }

}

[igotDiamonds]

IDONTSUDO, скинул

Answer 1

[Andrew]

Потому что в мэпе вернули underfined(console.log() возвращает его).
this.formData.fields.map(e => e.label)

Comments

[igotDiamonds]

не, проблема как раз в том что Cannot read property 'map' of undefined

[Andrew]

igotDiamonds, formData.fields точно есть такое? он асинхронный?

[igotDiamonds]

Andrew, точно есть, до этого все работало норм только вместо fields было attr

[abberati]

igotDiamonds, в рендере выведите в консоль этот массив. Скорее всего происходит несколько рендеров подряд и изначально массива в этом поле не существует.

[igotDiamonds]

abberati, так точно, а почему несколько раз рендерится ? Спасибо

[strelok011]

изменение пропсов заставляет компонент заново выполнять рендер. Запрос у вас асинхронный, потому и происходит не сколько рендеров (это еще и из-за других пропсов может происходить)
Можно повесить в componentDidUpdate проверку этого значения и как только оно получено - производить его обработку.
Ну или любой другой способ работы с измененными данными.