Возвращение сообщения об успехе / ошибке JSX в функции - PullRequest
Новая
       7

Возвращение сообщения об успехе / ошибке JSX в функции

0 голосов
/ 26 февраля 2020

Я надеюсь на проверку здравомыслия. Я отправляю данные в validateRequiredFields (), а затем пытаюсь визуализировать сообщение об успехе или об ошибке через Toast. Я думаю, что происходит то, что у меня не установлено правильное количество возвратов по всему приложению, что препятствует рендерингу JSX для сообщения об успешном завершении. В настоящее время пользователь заполняет форму и нажимает кнопку сохранения, которая приводит его к validateRequiredFields (). Оттуда он проверяет повторяющиеся и пустые значения.

Вот validateRequiredFields () 

validateRequiredFields() {
        // LOOP THROUGH REQUIRED FIELDS AND CHECK THERE IS A SAVED VALUE IN STATE FOR EACH FIELD
        let requiredFields = this.state.companyFormFields;
        let formFields = this.state.form;
        let filledFields = [], emptyFields = [], missingFields;

        let checker = (arr, target) => target.every(v => arr.includes(v));

        // ADD FIELDS THAT HAVE VALUES TO FILLEDFIELD ARRAY
        Object.entries(formFields).map(field => {
            if (field[1] == "" || !field[1]) {
                emptyFields.push(field[0])
            } else {
                filledFields.push(field[0])
            }
        });

        if (Object.entries(filledFields).length !== 0) {

            // CHECK TO SEE IF ALL REQUIRED FIELDS ARE FILLED OUT
            if (checker(filledFields, requiredFields) == false) {

                missingFields = requiredFields.filter(x => !filledFields.includes(x))
                console.log('missing fields: ', missingFields)
                // ***************************** DISPLAY MISSING FIELDS TO USER
                return <ToastMessage type='error'/>

            } else {
                // ***************************** SUBMIT DATA TO API
                // this.serverPostSale()
                console.log('All fields here!')
            }
        } else { console.log('No data in FilledFields ', filledFields) }

    }

И это мой компонент ToastMessage: 

import React from 'react';
import { Toast, ToastBody, ToastHeader } from 'reactstrap';

const ToastMessage = (props) => {

    console.log('yay error')
    switch (props.type) {
        case 'error':
            return (
                <>
                    <div className="p-3 my-2 rounded">
                        {console.log('Does this shizzle work?')}
                        <Toast>
                            <ToastHeader>Reactstrap</ToastHeader>
                            <ToastBody>This is a toast on a white background — check it out!</ToastBody>
                        </Toast>
                    </div>
                </>
            )

            default:
                console.log('no TOAST for you', props)
    }
}

export default ToastMessage

Я только на сколько раз я возвращаю этот компонент? Если я помещу компонент непосредственно в render (), он работает отлично. Спасибо!

...