如何使用活动选项卡菜单名称更新我的反应状态，以便它可以传递给端点调用？

Question

我正在开发一个 React 应用程序，我需要根据传递给后端 api 调用的动态参数值显示多个页面的数据。我正在使用来自 semantic-ui-react 的 Tab 组件，但我不知道如何将活动 menu/page 的名称传递给我的状态，以便它可以传递给 api 方法作为参数。根据页面名称，每个页面的后端 returns 数据不同。

我已经将我的代码放在沙盒中，如果有人可以帮助我

https://codesandbox.io/s/eager-leakey-0emhz?file=/src/App.js

import React from "react";
import { Tab } from "semantic-ui-react";
import "./styles.css";
import { connect } from "react-redux";
import ApiActions from "./actions/";
import { API_PAGE_GET_SUCCESS } from "./actions/types";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      activeIndex: 0,
      nav_menu: [
        { menuItem: "Dashboard", render: () => "Dashboard page" },
        { menuItem: "Profile", render: () => "Profile page" },
        { menuItem: "Contact", render: () => "Contact page" }
      ]
    };
  }

  componentDidMount() {
    this.getPage();
  }

  getPage() {
    const { getPageData } = this.props;

    getPageData("dashboardPage").then((response) => {
      if (response.type == API_PAGE_GET_SUCCESS) {
        this.setState({
          data: response.payload
        });
      }
    });
  }

  handleTabChange = (e, { activeIndex }) => this.setState({ activeIndex });

  render() {
    const { activeIndex, nav_menu } = this.state;
    return (
      <>
        <Tab
          id="sidebar"
          menu={{
            fluid: false,
            vertical: true,
            secondary: true,
            pointing: true
          }}
          menuPosition="left"
          panes={nav_menu}
          activeIndex={activeIndex}
          onTabChange={this.handleTabChange}
        />
      </>
    );
  }
}

export const mapDispatchToProps = (dispatch) => ({
  getPageData: (page) => {
    const action = ApiActions.common.getPageData(page);
    const response = dispatch(action);
    return response;
  }
});

export default connect(null, mapDispatchToProps)(App);

Answer 1

你可以从状态中获取名字:

getPage() {
  const { getPageData } = this.props;
  const { activeIndex, nav_menu} = this.state;

  const currentPage = nav_menu[activeIndex].menuItem;

  getPageData(currentPage || "dashboardPage").then((response) => {
    if (response.type == API_PAGE_GET_SUCCESS) {
      this.setState({
        data: response.payload
      });
    }
  });
}

如何使用活动选项卡菜单名称更新我的反应状态，以便它可以传递给端点调用？

How to update my react state with active tab menu name so it can pass on to the endpoint call?

javascript

ecmascript-6

reactjs

react-redux

semantic-ui-react