React 监听服务中的更新数据，然后将数据传递给另一个组件中的 Admin dataProvider

Question

对 React 还是个新手。正如主题所述，我想监听通过我的服务传来的数据，如下所示：

import axios from "axios"

const base_url = 'https://localhost:5001/OrderItem';

export let orderItemByDivision = {
    data: []
}

export const getOrderItemByDiv = (div, yr) => {
    orderItemByDivision.data = axios.get(base_url + "/" + div + "/" + yr);
    return axios.get(base_url + "/" + div + "/" + yr)
}

上述服务是通过从下拉菜单中选择年份，然后选择一个部门来触发的，该部门将 get 发送到 API 以 JSON

响应

import React from 'react';
import { FormGroup, FormControl, Button, IconButton, Menu, MenuItem } from '@material-ui/core';
import { getDivision } from '../services/division-service';
import { getOrderItemByDiv } from '../services/order-item-service';
import { MuiThemeProvider } from '@material-ui/core/styles';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import theme from '../theme';

export  default class DivisionDropDownComponent extends React.Component {
    state = {
        divData: [],
        divValue: 'Select Division',
        divOpen: false,
        divAnchorEl: null,
        yrValue: '2020',
        yrOpen: false,
        yrAnchorEl: null,
        yrs: ['2020','2019','2018','2017','2016','2015','2014','2013','2012']
    }

    constructor(props) {
        super(props);

        this.handleDivChange = this.handleDivChange.bind(this);
    }

    componentDidMount() {
        getDivision()
            .then((res) => {
                this.setState({ divData: res.data });
            })
            .catch(error => {
                console.error(error);
            });
    }

    handleDivChange = (divData) => {
        // this.setState({value: event.target.value ? event.target.value : ''});
        console.log("divData selected: " + divData.code_division); 
        getOrderItemByDiv(divData.code_division, this.state.yrValue)
            .then((res) => {
                console.log(res.data);
            })
            .catch(error => {
                console.error(error);
            });
        this.onCloseDiv();
    }

    handleYrChange = (event) => {
        // this.setState({value: event.target.value ? event.target.value : ''});
        this.setState({ yrValue: event.target.value });
        console.log("divData selected: " + event.target.value);
        this.onCloseYr();
    }

    handleDivClick = (event) => {
        this.setState({ divAnchorEl: event.target })
        this.setState({ divOpen: true });
    }

    handleYrClick = (event) => {
        this.setState({ yrAnchorEl: event.target })
        this.setState({ yrOpen: true });
    }

    onCloseDiv = () => {
        this.setState({ divOpen: false });
    }

    onCloseYr = () => {
        this.setState({ yrOpen: false });
    }

    render(){
        let arrayOfData = this.state.divData;
        let dropdowns = arrayOfData.map((divData) =>               
            <MenuItem onClick={(event) => this.handleDivChange(divData)} key={divData.code_division}
            value={divData.code_division} text={divData.code_division}>
                {divData.code_division}
            </MenuItem>
        );
        let arrayOfYrs = this.state.yrs;
        let yrDropDown = arrayOfYrs.map((yrs) =>
            <MenuItem onClick={(event) => this.handleYrChange(event)} value={yrs} key={yrs}>
                {yrs}
            </MenuItem>           
        );
        return (
            <MuiThemeProvider theme={theme}>
                <FormGroup column='true'>
                    <FormControl>
                    <IconButton
                        aria-label="more"
                        aria-controls="long-menu"
                        aria-haspopup="true"
                        onClick={this.handleDivClick}
                    >
                        <MoreVertIcon />
                    </IconButton>
                        <Menu id="div-menu" anchorEl={this.state.divAnchorEl} open={this.state.divOpen} onClose={this.onCloseDiv}
                        className='dropDownDiv' defaultValue={this.state.divValue ? this.state.divValue: ''} >
                            <MenuItem value="Select Division">
                                Select Division
                            </MenuItem>
                            {dropdowns}
                        </Menu>
                        <Button aria-controls="simple-menu" aria-haspopup="true" onClick={this.handleYrClick}>
                            Select Year
                        </Button>
                        <Menu id="yrs-menu" open={this.state.yrOpen}
                        anchorEl={this.state.yrAnchorEl}  onClose={this.onCloseYr}
                        defaultValue={this.state.yrValue ? this.state.yrValue: ''} >
                            {yrDropDown}
                        </Menu>
                    </FormControl>
                </FormGroup>
            </MuiThemeProvider>
        )
    }

}

如您在屏幕截图中所见，数据正在控制台中传输。我如何让 Admin dataProvider 监听来自 order-item-service.jsx 文件的任何更改？

我可以在 orderItemByDivision.data 上放置一个 observable 吗？

像往常一样，提前致谢

编辑我的 post 以便为我的问题提供更多细节。在Angular中，我使用了HttpClient和RxJS进行订阅和观察。我在 React 中尝试了以下方法，但 setState 有问题：

import { ajax } from "rxjs/ajax";
import { Observable } from "rxjs";

const base_url = "https://localhost:5001/OrderItem";

export let orderItemByDivision = {
data: []
};

export const getOrderItemByDiv = (div, yr) => {
return new Observable(observe => {
    orderItemByDivision.data = ajax
    .get(base_url + "/" + div + "/" + yr)
    .subscribe(resu => {
        setState({ orderItemByDivision.data:  resu });
        observe.next(resu);
    });
});
};

请参阅“orderItemByDivision.data”，它在点符号方面存在问题。由于这是一项服务，不在组件 class 内，我无法调用 this.setState。如何设置状态，以便观察和订阅 ajax 请求？

提前致谢

Answer 1

我的意思是这样的。

class ParentComp extends Component {

  constructor (props) {
    super(props);

    this.state = {
      data: {}
    };
  }

  editData = newData => {
    this.setState({
      data: newData
    });
  };

  render () {
    return <ChildComp editData={ this.editData } />;
  }
}

class ChildComp extends Component {

  render () {
    return <Button onCLick={ () => this.props.editData(someData) } />;
  }
}

您可以从子组件更新父组件状态。

Answer 2

好的，我能够模拟我在 Angular 6 中所做的，即创建一个可观察的对象，然后可以订阅它（监听变化）

首先，订单项-service.jsx:

import { Subject } from 'rxjs';
import { ajax } from "rxjs/ajax";
import { Observable } from "rxjs";

const subject = new Subject();
const base_url = 'https://localhost:5001/OrderItem';

export let orderItemByDivision = {
    data: []
}

export const getOrderItemByDiv = (div, yr) => {
    return new Observable(observe => {
        orderItemByDivision.data = ajax
        .get(base_url + "/" + div + "/" + yr)
        .subscribe(resu => {
            orderItemByDivision.data = resu.response ;
            observe.next(resu.response);
        });
    });
};

export const messageService = {
    sendMessage: message => subject.next({ message }),
    clearMessage: () => subject.next(),
    getMessage: () => subject.asObservable()
}

如您所见，我尝试使用 rxjs 中的 Subject 在组件之间发送数据，但是使用 rxjs/ajax 中的 ajax 最终让我能够听到变化

我对部门-service.jsx服务进行了相同的处理：

import { ajax } from "rxjs/ajax";
import { Observable } from "rxjs";

const base_url = 'https://localhost:5001/Division';

let state = {
    data: []
}

export const getDivision = () => {
    return new Observable(observe => {
        state.data = ajax
        .get(base_url)
        .subscribe(resu => {
            state.data = resu.response ;
            observe.next(resu.response);
        });
    });
}

正如您在这两种情况下看到的，它在订阅 get 方法后创建了 observable - 换句话说，每次使用 API URL 时，它都会提醒任何人谁订阅了上述两种方法。

下面的 division-dropdown-component.jsx 组件，接收分区 JSON，它填充分区的下拉菜单。一旦最终用户点击一个部门，getOrderItemByDiv 就会被订阅，这 returns 我们需要填充 @material-ui Table 的 JSON - 如下所列：

    import React from "react";
    import {
    FormGroup,
    FormControl,
    Button,
    Menu,
    MenuItem
    } from "@material-ui/core";
    import { getDivision } from "../services/division-service";
    import { getOrderItemByDiv } from "../services/order-item-service";
    import { MuiThemeProvider } from "@material-ui/core/styles";
    import theme from "../theme";
    import { messageService } from "../services/order-item-service";

    export default class DivisionDropDownComponent extends React.Component {
    state = {
        divData: [],
        divValue: "Select Division",
        divOpen: false,
        divAnchorEl: null,
        yrValue: "2020",
        yrOpen: false,
        yrAnchorEl: null,
        yrs: [
        "2020",
        "2019",
        "2018",
        "2017",
        "2016",
        "2015",
        "2014",
        "2013",
        "2012"
        ]
    };

    constructor(props) {
        super(props);

        this.handleDivChange = this.handleDivChange.bind(this);
    }

    componentDidMount() {
        getDivision().subscribe(res => {
        this.setState({ divData: res });
        });
    }

    handleDivChange = divData => {
        getOrderItemByDiv(divData.code_division, this.state.yrValue).subscribe(
        res => {
            this.setState({ divData: res });
            messageService.sendMessage(res);
        }
        );
        this.onCloseDiv();
    };

    handleYrChange = event => {
        this.setState({ yrValue: event.target.value });
        this.onCloseYr();
    };

    handleDivClick = event => {
        this.setState({ divAnchorEl: event.target });
        this.setState({ divOpen: true });
    };

    handleYrClick = event => {
        this.setState({ yrAnchorEl: event.target });
        this.setState({ yrOpen: true });
    };

    onCloseDiv = () => {
        this.setState({ divOpen: false });
    };

    onCloseYr = () => {
        this.setState({ yrOpen: false });
    };

    render() {
        let arrayOfData = this.state.divData;
        let dropdowns = arrayOfData.map((divData, index) => (
        <MenuItem
            onClick={event => this.handleDivChange(divData)}
            key={index}
            value={divData.code_division}
            text={divData.code_division}
        >
            {divData.code_division}
        </MenuItem>
        ));
        let arrayOfYrs = this.state.yrs;
        let yrDropDown = arrayOfYrs.map(yrs => (
        <MenuItem
            onClick={event => this.handleYrChange(event)}
            value={yrs}
            key={yrs}
        >
            {yrs}
        </MenuItem>
        ));
        return (
        <MuiThemeProvider theme={theme}>
            <FormGroup column="true">
            <FormControl>
                <Button
                aria-controls="simple-menu"
                aria-haspopup="true"
                onClick={this.handleYrClick}
                >
                Select Year
                </Button>
                <Menu
                id="yrs-menu"
                open={this.state.yrOpen}
                anchorEl={this.state.yrAnchorEl}
                onClose={this.onCloseYr}
                defaultValue={this.state.yrValue ? this.state.yrValue : ""}
                >
                {yrDropDown}
                </Menu>

                <Button
                aria-controls="simple-menu"
                aria-haspopup="true"
                onClick={this.handleDivClick}
                >
                Select Division
                </Button>
                <Menu
                id="div-menu"
                anchorEl={this.state.divAnchorEl}
                open={this.state.divOpen}
                onClose={this.onCloseDiv}
                className="dropDownDiv"
                defaultValue={this.state.divValue ? this.state.divValue : ""}
                >
                <MenuItem value="Select Division">Select Division</MenuItem>
                {dropdowns}
                </Menu>
            </FormControl>
            </FormGroup>
        </MuiThemeProvider>
        );
    }
    }

下面是order-item-component.jsx组成部分，里面填material-ui Table:

import React from "react";

import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import { TablePagination } from "@material-ui/core";
import TableFooter from "@material-ui/core/TableFooter";
import { messageService } from "../services/order-item-service";

export default class OrderItemComponent extends React.Component {
  state = {
    data: [],
    _columns: [],
    Header: [],
    totalCount: 10,
    pageSize: 16,
    page: 0
  };

  componentDidMount() {

  componentDidMount() {
      this.subscription = messageService.getMessage().subscribe(message => {
          if (message) {

              this.setState({ data: message.message });
              this.setState({ totalCount: Math.ceil(this.state.data.length / this.state.pageSize) });
              this.setState({ Header: ['order_id', 'order_item_id', 'product_id', 'code_division', 'code_product', 
              'quantity_due', 'quantity_shipped', 'price', 'date_shipped', 'date_due', 
              'customer_id','ship_via','value_due','value_shipped','date_order','date_modified'] });

          } else {
              // do nothing
              this.setState({ data: [] });
          }
      })
  }

  componentWillUnmount() {
      // unsubscribe to ensure no memory leaks
      this.subscription.unsubscribe();
  }

  getOrderItem(){
      this.setState({ data: messageService.getMessage() });
  }

  handleChangePage = (event, newPage) => {
    this.setState({ page: newPage });

    if (this.state.totalCount !== this.state.data.length) {

    }
  }

  render() {

      return (
          <div>
  <TableContainer component={Paper}>
    <Table aria-label="simple table">
      <TableHead>
        <TableRow>
          <TableCell>Order ID</TableCell>
          <TableCell align="right">Qty Due</TableCell>
          <TableCell align="right">Prod ID</TableCell>
          <TableCell align="right">Div</TableCell>
          <TableCell align="right">Prod Code</TableCell>
          <TableCell align="right">Qty Sh</TableCell>
          <TableCell align="right">Price</TableCell>
          <TableCell align="right">Dt SH</TableCell>
          <TableCell align="right">Dt Due</TableCell>
          <TableCell align="right">Cust ID</TableCell>
          <TableCell align="right">Ship Via</TableCell>
          <TableCell align="right">Val Dt</TableCell>
          <TableCell align="right">Val Sh</TableCell>
          <TableCell align="right">Dt Or</TableCell>
          <TableCell align="right">Dt Mod</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {this.state.data.map((row, index) => (
          <TableRow key={ index }>
            <TableCell component="td" scope="row">
              { row.order_id }
            </TableCell>
            <TableCell align="right">{ row.quantity_due }</TableCell>
            <TableCell align="right">{ row.product_id}</TableCell>
            <TableCell align="right">{ row.code_division }</TableCell>
            <TableCell align="right">{ row.code_product }</TableCell>
            <TableCell align="right">{ row.quantity_shipped }</TableCell>
            <TableCell align="right">{ row.price }</TableCell>
            <TableCell align="right">{ row.date_shipped}</TableCell>
            <TableCell align="right">{ row.date_due }</TableCell>
            <TableCell align="right">{ row.customer_id }</TableCell>
            <TableCell align="right">{ row.ship_via }</TableCell>
            <TableCell align="right">{ row.value_due }</TableCell>
            <TableCell align="right">{ row.value_shipped }</TableCell>
            <TableCell align="right">{ row.date_order }</TableCell>
            <TableCell align="right">{ row.date_modified }</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TablePagination
            rowsPerPageOptions={ [5, 10, 25, { label: 'All', value: -1 }] }
            colSpan={ 3 }
            count={ this.state.data.length }
            rowsPerPage={ this.state.pageSize }
            page={ this.state.page }
            SelectProps={ {
              inputProps: { 'aria-label': 'rows per page' },
              native: true,
            } }
            onChangePage={ this.handleChangePage }
          />
        </TableRow>
      </TableFooter>
    </Table>
    </TableContainer>
          </div>
      )
  }

}

现在，你可以看到我是如何使用 getMessage 方法来设置数据的

除了分页之外，几乎所有功能都有效 - 当我单击 "more" 箭头时，它会正确计算下一组数据，但不会显示 "new" Table内的数据。当涉及分页时，我将不得不弄清楚如何在 @material-ui Table 上进行刷新，但是，我想我会分享以防其他人想知道如何创建可观察对象。

我尝试使用@material-ui 文档中的示例，但 setPage = React.useState(5) 一直导致与无效挂钩或类似内容有关的错误- 关于以下功能：

  const handleChangePage = (event, newPage) => {
     setPage(newPage);
  };

我将 post 关于该主题的另一个问题，但目前，我提出的问题已得到解答

再次感谢

React 监听服务中的更新数据，然后将数据传递给另一个组件中的 Admin dataProvider

React listen for updated data in service then pass the data to Admin dataProvider in another component

reactjs

axios

react-admin