Question

我仍然不如我想的那样熟练地使用ReactJS，Ant Design，Sagas和Reducers：我正在尝试维护/调试单页应用程序，但是我不确定我要处理哪些文件必须调整以及如何调整。

目标是在<select>的{{1}}函数中添加以下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), });而不是所有实体（甚至在错误的位置），请参见屏幕截图

如何获取使用来自API的数据动态生成的选择选项？由于我看不到后端被调用（使用Chrome调试器的 Network 标签），我认为Sagas出了点问题，但这只是一个假设。

背景信息

对于同一项目中已经有Option 0的另一个单页应用（SPA），我发现了一个<select>，其外观如下

urls.ts

我不知道此文件的实际调用位置，以及要包含该文件的位置我必须进行修改。

在正在运行的SPA的相应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与运行中的SPA和我的组件相同：

sagas.ts

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

参考文献

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引用目录actions.ts中的general。

我通过添加标记行解决了该问题。警告：我相信，这不是应该实施的方式，我只是说这已解决了我的问题。

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

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

背景信息

参考文献

1 个答案: