React，如何使用单独文件中的菜单来调用 api 并将数据返回到主文件的不同部分

如何解决React，如何使用单独文件中的菜单来调用 api 并将数据返回到主文件的不同部分

我有一个带有大菜单的 React 应用程序，因此我试图将它从主 app.js 移到一个单独的文件中

当您单击菜单中的链接时，它会调用一个节点 api 并返回一些数据，但是当我尝试分离时，我无法让它填充仍在主脚本中的结果部分

工作版 app.js

import React,{ useState } from 'react';

import './App.css';
import axios from 'axios';

import { Navigation } from "react-minimal-side-navigation";
import "react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css";

export default class MyList extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      result: [],};
    this.callmyapi = this.callmyapi.bind(this);
  }
  render() {
    return (
      <div>
     <div class="menu">
     <Navigation
    
    onSelect={({itemId}) => {
    
      axios.get(`/api/menu/`,{
        params: {
          Menu: itemId,}
      })
      .then(res => {
        const results = res.data;
        this.setState({ results });
        
      })
      .catch((err) => {
        console.log(err);
      })
      
    }}
  items={[
      {
        title: 'Pizza',itemId: '/menu/Pizza/',},{
        title: 'Cheese',itemId: '/menu/cheese',}
    ]}
  />
  </div>
<div class="body">
     this.state.results && this.state.results.map(results => <li>* {results.Name}</li>);
</div>
       </div>
    );
  }
}

新的 app.js

import React,{ useState } from 'react';
import './App.css';
//import axios from 'axios';
//import { Navigation } from "react-minimal-side-navigation";
//import "react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css";

import MyMenu from './mymenu';

export default class MyList extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      result: [],};
    this.callmyapi = this.callmyapi.bind(this);
  }
  render() {
    return (
      <div>
     <div class="menu">

   <MyMenu />

   </div>
<div class="body">
     this.state.results && this.state.results.map(results => <li>* {results.Name}</li>);
</div>
       </div>
    );
  }
}

新建菜单文件 mymenu.js

import React,{ Component } from 'react';
import axios from 'axios';
import './App.css';
//import MyList from './App.js';

//import { ProSidebar,Menu,MenuItem,SubMenu } from 'react-pro-sidebar';
//import 'react-pro-sidebar/dist/css/styles.css';

import { Navigation } from "react-minimal-side-navigation";
//import Icon from "awesome-react-icons";
import "react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css";

//export default async function MyMenu(){
export default class MyMenu extends React.Component {
  
    constructor(props) {
      super(props);
      
    };
    
  render() {
    
    return (
      <div>
     

    <Navigation
    // you can use your own router's api to get pathname
    activeItemId="/management/members"
    onSelect={({itemId}) => {
    //  return axios
      axios.get(`/api/menu/`,{
        params: {
        //  Menu: itemId,Menu: "meat",SubMenu : "burgers"
        }
      })
      .then(res => {
        const results = res.data;
        this.setState({ results });
        
      })
      .catch((err) => {
        console.log(err);
      })
      
    }}
  items={[
      {
        title: 'Pizza',}
    ]}
  />
</div>
    );
}
}

任何帮助将不胜感激

解决方法

一旦你理解 state 就很容易了。在这种情况下，状态是特定于组件的。 this.state 分别是指您的 App-Component 和您的 Menu-Component。所以为了让他们共享一个状态，你必须像这样将它传递到组件树中。

export default class MyList extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      result: [],};
  }

  render() {
    return (
      <div>
     <div class="menu">

   <MyMenu handleStateChange={(results: any[]) => this.setState(results)} />

   </div>
<div class="body">
     this.state.results && this.state.results.map(results => <li>* {results.Name}</li>);
</div>
       </div>
    );
  }
}

看到这一行： this.setState(results)} /> 在那里你传递一个函数来改变 App-Component 的状态到子元素

你可以打电话给：

onSelect={({itemId}) => {
    //  return axios
      axios.get(`/api/menu/`,{
        params: {
        //  Menu: itemId,Menu: "meat",SubMenu : "burgers"
        }
      })
      .then(res => {
        const results = res.data;
        this.props.handleStateChange(results)
        
      })
      .catch((err) => {
        console.log(err);
      })

您改变了父状态并且正在呈现正确的数据。确保练习状态及其工作原理以及在组件之间共享状态的有用模式。

,

谢谢 - 我找到了解决方案（也删除了链接问题）

以上渲染添加功能

handleCallback = (results) =>{
    this.setState({data: results})
}

然后我在哪里显示菜单

 <MyMenu parentCallback = {this.handleCallback}/>

我在哪里显示结果

{this.state.results && this.state.results.map(results => <li>{results.Name}</li>}

菜单脚本没有额外的变化