Typescript и Redux — ошибки при работе с макетом приложения Visual Studio 2017 по умолчанию

Итак, я создаю веб-форму для запроса разработки мобильных приложений. Эта форма будет получать информацию о мобильных приложениях от пользователей и сохранять ее, чтобы разработчики могли просмотреть запрос позже.

У меня нет большого знакомства с Redux и Typescript, но я решил пойти с проектом шаблона VS React, чтобы сэкономить время, начиная работу над этим, и который использует React, Redux и Typescript. Тем не менее, пока у меня не было никаких проблем. Я создал страницу со списком и начал работать над страницей, которая позволяет вам создать новый запрос.

Страница создания запроса доступна через React Router. Он указан специально как маршрут, и в навигации по страницам есть ссылка, которая позволяет открыть страницу создания. Вот страница создания:

import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState }  from '../store';
import * as AppRequestStore from '../store/AppRequest';
import DeveloperAccounts from './DeveloperAccounts';

type CreateAppRequestProps =
    AppRequestStore.AppRequestState
    & typeof AppRequestStore.actionCreators
    & RouteComponentProps<{}>;

class CreateAppRequest extends React.Component<CreateAppRequestProps, {}> {
    constructor() {
        super();

        this.Continue = this.Continue.bind(this);
    }

    componentWillMount() {
        // This method runs when the component is first added to the page
        this.props.create();
    }

    Continue(e:any) {
        this.props.begin();
    }

    public render() {
        let content;

        if (!this.props.appRequestBegun) {
            content = <div>
                <p>Please have all relevant info ready for reference before beginning the app request process.</p>
                <p>
                    {this.props.currentAppRequest ? this.props.currentAppRequest.CurrentSectionId : ''}
                </p>
                <p>
                    {this.props.currentAppRequest ? this.props.currentAppRequest.AppRequestSections.map(thing => thing.SectionType.Name) : ''}
                </p>
                <button value = "Continue" onClick = {this.Continue}>Continue</button>
                </div>
        }
        else
        {
            content = <DeveloperAccounts />
        }

        return <div>
            <h3 className = "elementor-icon-box-title">Create App Request</h3>

            {content}
        
        </div>;
    }
}


// Wire up the React component to the Redux store
export default connect(
    (state: ApplicationState) => state.appRequest, // Selects which state properties are merged into the component's props
    AppRequestStore.actionCreators                 // Selects which action creators are merged into the component's props
)(CreateAppRequest) as typeof CreateAppRequest;

Это отлично работает! Я могу получить доступ к состоянию Redux, которое успешно обращается к серверному API для переноса данных на страницу в режиме реального времени, и все такое прочее. Пока все работает нормально. Но теперь я хочу добавить свой первый подкомпонент на эту страницу, и я

сталкиваюсь с ошибками, которые я не понимаю. Это ссылка на компонент на странице создания.

DeveloperAccounts — это просто тупой компонент с голым HTML прямо сейчас. Я больше ничего не делал, потому что я просто хотел иметь рабочий подкомпонент на странице создания, прежде чем добавлять реальный материал. Все, что я сделал, это взял копию страницы создания и переименовал ключевые переменные (имя класса и т. д.):

import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as AppRequestStore from '../store/AppRequest';

type DeveloperAccountsProps =
    AppRequestStore.AppRequestState
    & typeof AppRequestStore.actionCreators;

class DeveloperAccounts extends React.Component<DeveloperAccountsProps, {}> {
    constructor() {
        super();

    }

    public render() {
        return <div>
        Developer Accounts
            
        </div>;
    }
}

// Wire up the React component to the Redux store
export default connect(
    (state: ApplicationState) => state.appRequest, // Selects which state properties are merged into the component's props
    AppRequestStore.actionCreators                 // Selects which action creators are merged into the component's props,
    
)(DeveloperAccounts) as typeof DeveloperAccounts;

Это дает мне следующую ошибку:

ОШИБКА в [at-loader]./ClientApp/components/CreateAppRequest.tsx:64:17 TS2322: тип "{}" не может быть назначен типу "IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNo...". Тип '{}' нельзя присвоить типу 'Только для чтения'. Свойство appRequests отсутствует в типе {}.

appRequests — это свойство основного состояния приложения, которое является частью типа props для этого класса. Из-за ошибки мне кажется, что компонент ожидает, что все в applicationState будет передано ему, но я не знаю, как это произойдет. У меня нет каких-либо реквизитов для передачи компоненту, и я просто хочу, чтобы он все равно был подключен к основному состоянию приложения с помощью метода подключения, как это было на странице создания.

Я внес одно изменение в интерфейс реквизита для этого компонента. Тип свойств страницы создания также включал RouteComponentProps<{}>, я полагаю, потому что на эту страницу ссылается маршрутизатор. Но поскольку этот дочерний компонент не включен в качестве маршрута, я подумал, что реквизиты компонента маршрута не должны быть включены.

В любом случае, я понятия не имею, почему этот, казалось бы, простой компонент выдает такие непостижимые ошибки. Я был бы очень признателен за помощь.

Эээ... Думаю, я только что нашел решение для этого, но кажется... не то. Ошибка исчезает, когда я передаю текущие реквизиты компонента создания компоненту DeveloperAccounts следующим образом: <DeveloperAccounts {...this.props} /> Но мне это кажется антипаттерном. С какой стати мне нужно передавать реквизиты из компонента, если эти реквизиты просто исходят из общего ApplicationState в магазине Redux? Вместо того, чтобы передавать эти универсальные значения от родительского компонента к дочернему, не должен ли я просто сделать так, чтобы они оба ссылались на хранилище Redux?

AlexeiKaramazov 17.03.2019 18:24

... и да, это решение не похоже на настоящее исправление. Кажется, что на самом деле он получает живые реквизиты только при первом создании, но после повторного рендеринга он теряет эти данные. Все еще теряюсь в том, что делать.

AlexeiKaramazov 17.03.2019 19:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
30
0

Другие вопросы по теме