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

Я все еще не так хорошо владею 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 вместо всех сущностей (и даже не в том месте), см. Снимок экрана.

Снимок экрана с выбранными параметрами

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

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

Для другого одностраничного приложения (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()
        ])
];

Я не знаю, где на самом деле вызывается этот файл и что мне нужно изменить, чтобы включить его.

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

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

Я не уверен, принимает ли мой СПА это 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);
}

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

использованная литература


reactjs javascript antd redux-saga
person B--rian    schedule 19.02.2020    source источник
comment
Я предполагаю, что что-то не так с сагами, но это всего лишь гипотеза. Я бы сказал, что это может быть правильная гипотеза. Этот селектор GeneralSelectors.getAvailableEntities(state) должен создать фрагмент магазина, который вам нужен для заполнения вашего <Select />. Если вы отследите его, вы можете найти правильные действия, которые нужно отправить, чтобы получить вашу информацию. Что касается другого <Select /> компонента, выполняется ли вызов во время запуска приложения? Когда монтируется конкретный компонент? Вы можете узнать, когда на самом деле вызов.   -  person Clafou    schedule 20.02.2020
comment
@Clafou: Вместо этого я написал ответ. Не стесняйтесь комментировать.   -  person B--rian    schedule 20.02.2020

Ответы (1)


arrow_upward
1
arrow_downward

В конце концов я также нашел еще один 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.

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

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

person B--rian    schedule 20.02.2020
comment
Я действительно не знаю, как работает ваше приложение, поэтому, возможно, было бы правильно сделать это таким образом. Использование саги для отправки некоторых действий в ответ на другое действие кажется мне совершенно нормальным (отказ от ответственности: я не эксперт по саге редукции). Рад, что вы нашли решение своей проблемы! :) - person Clafou; 20.02.2020