Итак, я создаю веб-форму для запроса разработки мобильных приложений. Эта форма будет получать информацию о мобильных приложениях от пользователей и сохранять ее, чтобы разработчики могли просмотреть запрос позже.
У меня нет большого знакомства с 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?