Как правильно построить приложение на React?

Question

[Shato Daltsaev]

Новичок в изучении React и возникли проблемы с правильным его пониманием. Все работает, но построено мое приложение очень странно и как мне кажется не оптимально. Есть обмен данными между фронтом и api. Я создал модель в файле ts.
Это модель, которая отправляет данные на api:

export interface SearchOrderingPrePaymentParameters {
    orderCrmNumber: string;
}

//и модель которая возвращается

export interface PrePaymentParameters {
    partnerId: number;
    orderNumber: string;
    webSite: string;
    accountNumber: string;
    sign: string;
    sumValue: number;
    emailClient: string;
    emailOperator: string;
    numberTransactions: number;
    sumTransaction: number;
    period: number;
}

// импорт в приложение 
import { SearchOrderingPrePaymentParameters } from '../../models/Orders/Operations/PrePayment/SearchOrderingPrePaymentParameters';
import { PrePaymentParameters } from '../../models/Orders/Operations/PrePayment/PrePaymentParameters';

export interface IFormState {
    searchOrderingPrePayment: SearchOrderingPrePaymentParameters;
    prePaymentParameters: PrePaymentParameters;

}
export default class PaymentByCardPage extends React.Component<IFormProps, IFormState> { 

constructor(props: IFormProps) {
// вот тут сразу и вопрос почему я не могу сделать тип данных SearchOrderingPrePaymentParameters?
// то есть написать просто searchOrderingPrePayment: SearchOrderingPrePaymentParameters
        super(props);
        this.state = {
                prePaymentParameters: {
                accountNumber: "",
                emailClient: "",
                emailOperator: "",
                numberTransactions: null,
                orderNumber: null,
                partnerId: null,
                period: null,
                sign: "",
                sumTransaction: null,
                sumValue: null,
                webSite: ""
            },
            searchOrderingPrePayment: {
                orderCrmNumber: ""
            },
        };
    }
  // дальше все выглядит так.

    private getOrders = async (): Promise<boolean> => {
        if (this.state.searchOrderingPrePayment.orderCrmNumber != "") {
            let preOrderRes = await Axios.post('/OrderOperations/SearchOrderingPrePayment', {
                ...this.state.searchOrderingPrePayment,
            });
            // Вот тут возвращаемая модель становится any. Как по мне здесь нужно собирать модель из JSON?Но как это 
            //сделать я так и не понял. И не знаю, нужно это или нет? 
            if (preOrderRes.status == 200) {     
                this.setState({
                    prePaymentParameters: preOrderRes.data["prePaymentOrderingList"]
                })
            }
            else {             
                return false;
            }
        }
        return false;
    };
    private onChange = (e: any) => {
        this.setState({
            searchOrderingPrePayment: {
                orderCrmNumber: e.target.value
            }           
            });
    }

render() {
        const { url, submitSuccess, orderInfo, prePaymentOrdering, orderDataCrm, prePaymentParameters, resultPrePayment } = this.state;
        return (
                   <Col md={10} sm={10} xs={10} className="mb-1 pt-3 pr-0 pl-4">
                                        <Field id="orderNumberSearch"
                                            placeholder="Поиск заказа"
                                            onChange={
                                                (e: React.FormEvent<HTMLInputElement>) => {
                                                    this.onChange(e)
                                                }
                                            }
                                            autoComplete="disabled"
                                            value={this.state.searchOrderingPrePayment.orderCrmNumber}
                                        />
                                    </Col>
                                    <Col md={2} sm={2} xs={2} className="mb-1 pt-3 pl-0">
                                        <div className="text-center">
                                            <button type="button" onClick={this.getOrders} className="btn btn-primary">Поиск</button>
                                        </div>
                                    </Col>
                                </Row>
                            </CardBody>
                        </Card>
                                <Card className="mt-2">
                                    <CardBody>                             
                                            render={
                                                () => (
                                                    <React.Fragment>
                                                        <Row>
                                                            <Col md={6} sm={6} xs={12} className="mb-3">
                                                                <Field id="orderNumber" label="Номер заказа"
                                                                    value={prePaymentParameters.orderNumber || ''}
                                                                    onChange={
                                                                        (e: React.FormEvent<HTMLInputElement>) => {
                                                                            this.onChange(e)
                                                                        }
                                                                    }
                                                                />
                                                            </Col>
                                                            <Col md={6} sm={6} xs={12} className="mb-3">
                                                                <Field id="sumValue" label="Сумма предоплаты" onChange={
                                                                    (e: React.FormEvent<HTMLInputElement>) => {
                                                                        this.onChange(e)
                                                                    }
                                                                }
                                                                    value={prePaymentParameters.sumValue || ''}
                                                                    type="number"
                                                                    autoComplete="disabled"
                                                                />
                                                            </Col>
                                                        </Row>
                                                        <Row>
                                                            <Col md={6} sm={6} xs={12} className="mb-3">
                                                                <Field id="numberTransactions" label="Количество транзакций" onChange={
                                                                    (e: any) => {
                                                                        this.onChange(e)
                                                                    }
                                                                }
                                                                    type="number"
                                                                    value={prePaymentParameters.numberTransactions || ''}
                                                                />
                                                            </Col>
                                                            <Col md={6} sm={6} xs={12} className="mb-3">
                                                                <Field id="sumTransaction" label="Сумма транзакций" onChange={
                                                                    (e: React.FormEvent<HTMLInputElement>) => {
                                                                        this.onChange(e)
                                                                    }
                                                                }
                                                                    value={prePaymentParameters.sumTransaction || ''}
                                                                    type="number"
                                                                />
                                                            </Col>
                                                        </Row>
                                                        <Row>
...../ и тд

Хочу попросить подсказать, правильно ли построено приложение в данном случае?

Comments

[Алексей Уколов]

построено мое приложение очень странно и как мне кажется не оптимально.

Что именно вас смущает?

[Shato Daltsaev]

Алексей Уколов, меня смущает, что однажды созданная модель не типизируется в самом реакте.

я вызвал в стейт и сказал, какой это тип данных
export interface IFormState {
searchOrderingPrePayment: SearchOrderingPrePaymentParameters;
prePaymentParameters: PrePaymentParameters;

}

Зачем внутри приложения расписывать его значения?
this.state = {
prePaymentParameters: {
accountNumber: "",
emailClient: "",
emailOperator: "",
numberTransactions: null,
orderNumber: null,
partnerId: null,
period: null,
sign: "",
sumTransaction: null,
sumValue: null,
webSite: ""
},
нельзя просто сделать так же prePaymentParameters: PrePaymentParameters ?
и затем при вызове в апи этот тип становится any? Я же сказал, какого типа это данные в стейте.
И вообще может я не правильно все сделал? Это и смущает.