从 ReactJs 中的变量生成 select 选项条目

Question

我在 ReactJS、Ant Design、Sagas 和 Reducers 方面仍然不如我认为的那样流利：我正在尝试维护/调试单页应用程序，但我不是确定我必须调整哪些文件以及如何调整。

目标是在 component.tsx 内的 render() 函数中添加以下 <select>：

<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()
        ])
];

我不知道这个文件实际上在哪里被调用，也不知道我必须在哪里修改才能包含它。

在运行 SPA 的相应 actions.ts 中，我发现

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);
}

希望这不是太多信息，但我想这都与问题有关。

参考资料

populate select option in reactjs

Answer 1

最后我也找到了另一个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 引用目录 general 中的 actions.ts。

我通过放置标记线解决了这个问题。 警告：我相信，这不是应该实施的方式，我只是说它修复了我的问题。

正如 clafou 在评论中指出的那样，干净的方法是在启动时触发 yield。

从 ReactJs 中的变量生成 select 选项条目

Generate select option entries from variables in ReactJs

javascript

reactjs

redux-saga

antd

背景信息

参考资料