Генерация записей опций выбора из переменных в ReactJs - PullRequest
Новая
       17

Генерация записей опций выбора из переменных в ReactJs

1 голос
/ 19 февраля 2020

Я все еще не так свободно владею ReactJS, Ant Design , Sagas и Reducers, как я думал: Я пытаюсь поддерживать / отлаживать одностраничное приложение, и я не уверен, какие файлы мне нужно настроить и как.

Цель состоит в том, чтобы добавить следующие <select> в их render() функцию в component.tsx: 

<Select showSearch
        style={{ width: 150 }}
        placeholder="Select entity" 
        // onChange={(e) => { this.handleSelectorChange("Entity", e) }} // to tackle later
        // value={this.props.selectedEntity.toString()}                 // ------ " ------
>
<Option value="0">Option 0</Option>
   {this.props.availableEntities.map((myEntity) =>
    (<Option key={myEntity.Id.toString()}
             value={myEntity.Id.toString()}>{myEntity.Name}</Option>))}
</Select>

В соответствующем container.tsx я добавил: 

const mapStateToProps = (state ) => ({
    availableEntities: GeneralSelectors.getAvailableEntities(state),
});

В ответ я получаю только Option 0 вместо всех объектов (и даже в неправильном месте), см. Скриншот

Screenshot of select options

Как получить параметры выбора, динамически генерируемые с использованием данных из API? Поскольку я не вижу, как вызывается сервер (с помощью Сеть (вкладка моего Chrome отладчика), я предполагаю, что что-то не так с сагами, но это только гипотеза.

Справочная информация

Для другой страницы -app (SPA) того же проекта, который уже имеет этот <select> внутри, я нашел urls.ts, который выглядит следующим образом 

import UrlMap from "../UrlMap"
import * as Actions from "./actions"
import * as GeneralActions from "../general/actions"

export const urls = [
    new UrlMap("myWorkingSPA",
        () => [
            Actions.load(),
            GeneralActions.loadEntities(),
            Actions.loadDifferencePositions()
        ])
];
* 1 037 * Я не знаю, где этот файл на самом деле вызывается, и что я должен изменить, чтобы включить его.

В соответствующем actions.ts работающего SPA я нахожу 

export function loadEntities() : Action {
    return {
        type: LOAD_ENTITIES
    }
}

Я не уверен, что мой SPA также принимает это actions.ts или нет.

* * * * * sagas.ts одинаково для работающего SPA и для моего компонента: 

function* loadEntities() {
    const url = config.apiBaseUrl + "/api/Entities";

    try {
        const response: Response = yield fetch(url);
        const json: Interfaces.Entity[] = yield response.json();
        yield put(Actions.setEntities(json));
    } catch (e) {
        notification.error({ message: "Error", description: "Error loading Entities" });
    }
}

function* watchLoadEntities() {
    yield takeEvery(Actions.LOAD_ENTITIES, loadEntities);
}

Надеюсь, что это не слишком много информации, но я думаю, что все это связано с проблемой.

Ссылки

1 Ответ

1 голос
/ 20 февраля 2020

В конце концов я также обнаружил еще одну sagas.ts, которая также действовала: 

function* parseUrl({ payload }) {
    const pathName = payload.location.pathname;

    const myComponentURI: match<{}> = matchPath(pathName, { path: config.uiBaseUrl + "myComponent" });
    if (myComponentURI) {
        yield put(GeneralActions.loadEntities()); // <---
    }

   // ... here are many more const. for various different pages
}

GeneralActions относится к actions.ts в каталоге general.

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

Как Клафу указал в комментарий, чистый способ был бы вызвать yield при запуске.

...