Javascript 阿波罗没有反应

我刚刚开始使用React，尤其是GraphQL，所以现在，这是我第一次使用React Apollo，我正在使用Apollo Boost

当我在渲染函数中使用React apollo的变异时，我有一个错误（或缺少错误）。以下是我的代码片段（请原谅我在这段代码中的错误做法，一旦我修复了突变，我将修复它们）：

index.js ReserveSform类 伦德尔

render（）{
const{classes}=this.props；
const{userId，fromDt，toDt，教室，购物车，时区，reservationTime，laboratory}=this.state；
const fromDateTime=this.state.fromDt=Moment（this.state.date+“”+this.state.reservationTime）.toISOString（）；
常数toDateTime=（）=>{
this.state.endTime=Moment.utc（+Moment.utc（this.state.reservationTime，'hh:mm A'））.add（40，'m'））.format（'hh:mm'）；
返回this.state.toDt=Moment（this.state.date+“”+this.state.endTime）.toISOString（）；
}
返回




重新预订


手推车预订表
{bookCart=>
{
e、 preventDefault（）；console.log（this.state）；bookCart（{变量：{rDateStart:fromDt，rDateEnd:toDt，年级：教室.substring（1），节：教室.substring（1，1），userId:userId，cartlabId:cart}）；}>
选择购物车
没有一个
iPad手推车
MacBook手推车
MacBookAir手推车
此.handleon更改（“日期”，e）}/>
选择时区
没有一个
学前教育（40分钟）
小学（50分钟）
高中（60分钟）

借款时间
第1期
第2期
第3期
第4期
第5期
第6期
第7期
预订结束的时间。
主题
这个.handleOnChange（“主题”，e）}/>
推车将用于的主题
这个.handleOnChange（“教室”，e）}/>
推车将在哪里使用
this.handleOnChange（“fromDt”，e）}/>


这个.handleOnChange（“toDt”，e）}/>
储备
}
{“保留购物车”}
你预订了一辆手推车。点击确认。
返回
证实


;
}
}
ReserveCartsForm.propTypes={
类：PropTypes.object.isRequired
};
导出默认样式（样式）（ReserveCartsForm）；

我试着寻找这样的例子，这些是关于我的代码来自哪里的少数几个例子

---

任何建议都将非常有帮助，我们将不胜感激。

您能否分享

onSubmit

功能的实现？您共享的代码中缺少它。很抱歉，答复太晚。是的，我想我在我的父组件中包含了一个OnSubmit。我使用graphql请求，尽管代码仍然非常低效。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ApolloProvider } from "react-apollo";
import { ApolloClient, HttpLink, InMemoryCache } from "apollo-boost";
import registerServiceWorker from './registerServiceWorker';

const client = new ApolloClient({
  link: new HttpLink({ 
  uri: 'http://localhost:3000/graphql',
}),
  onError: ({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      console.log(graphQLErrors);
    }
  },
  cache: new InMemoryCache()
});

const AppWithProvider = () => (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

ReactDOM.render(<AppWithProvider />, document.getElementById('root'));
registerServiceWorker();

 const BOOK_CART = gql `mutation booking($rDateStart: Date!, $rDateEnd: Date!, $grade: Int!, $section: String!, $userId: ID!, $cartlabId: ID!){
       bookCart(rDateStart: $rDateStart, rDateEnd: $rDateEnd, grade: $grade, section: $section, userId: $userId, cartlabId: $cartlabId){
        id
        rDateStart
        rDateEnd
        }
      }
    `;

class ReserveCartsForm extends React.Component {
constructor(props) {
    super(props);
      this.state = {
      userId: 1,
      classroom: '',
      subject: '',
      cart: '',
      timezone: '',
      reservationTime: '',
      endTime: '',
      open: false,
      date: '',
      fromDt: '',
      toDt: '',
      created: new Date().toISOString(),
      status: 'reserved'
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleOnChange = this.handleOnChange.bind(this);
  }
  handleOnChange = (key, e) => {
    this.setState({ [key]: e.target.value });
  };

render() {
const { classes } = this.props;
const { userId, fromDt, toDt, classroom, cart, timezone, reservationTime, laboratory } = this.state;

const fromDateTime = this.state.fromDt = Moment(this.state.date + " " + this.state.reservationTime).toISOString();

const toDateTime = () => {
  this.state.endTime = Moment.utc(+Moment.utc(this.state.reservationTime, 'hh:mm A').add(40, 'm')).format('HH:mm');
  return this.state.toDt = Moment(this.state.date + " " + this.state.endTime).toISOString();
}
return <div className={classes.root}>
    <br />
    <br />
    <Typography variant="title" className={classes.heading} component="h3" color="primary">
      Make New Reservation
    </Typography>
    <br />
    <Grid container spacing={24}>
      <Grid item xs={8} sm={7} md={6} lg={4} xl={3} className={classes.grid}>
        <Card className={classes.card}>
          <CardContent>
            <div className={classes.header}>
              <Typography variant="headline" component="h1" color="inherit" className={classes.title}>
                Carts Reservation Form
              </Typography>
            </div>
            <div className={classes.container}>
              <Mutation mutation={BOOK_CART}>
                {bookCart => <div>
                <FormGroup row={true} className={classes.formGroup}>
                  <form onSubmit={e => {
                    e.preventDefault(); console.log(this.state); bookCart({ variables: { rDateStart: fromDt, rDateEnd: toDt, grade: classroom.substring(1), section: classroom.substring(1, 1), userId: userId, cartlabId: cart } }); }}>
                    <FormControl className={classes.formControl}>
                      <InputLabel htmlFor="carts">
                        Choose Cart
                      </InputLabel>
                      <Select value={cart} labelstyle={classes.select} onChange={this.handleChange} inputProps={{ name: "cart", id: "carts" }}>
                        <MenuItem value="">
                          <em>None</em>
                        </MenuItem>
                        <MenuItem value={1}>iPad Carts</MenuItem>
                        <MenuItem value={2}>MacBook Carts</MenuItem>
                        <MenuItem value={3}>MacBook Air Carts</MenuItem>
                      </Select>
                    </FormControl>
                    <form className={classes.formControl} noValidate>
                      <TextField id="date" label="Date" type="date" className={classes.textField} InputLabelProps={{ shrink: true }} onChange={e => this.handleOnChange("date", e)} />
                    </form>
                    <FormControl className={classes.formControl}>
                      <InputLabel htmlFor="timezone">
                        Choose Timezone
                      </InputLabel>
                      <Select value={timezone} labelstyle={classes.select} onChange={this.handleChange} inputProps={{ name: "timezone", id: "timezone" }}>
                        <MenuItem value="">
                          <em>None</em>
                        </MenuItem>
                        <MenuItem value={"P"}>
                          Pre School (40 mins.)
                        </MenuItem>
                        <MenuItem value={"G"}>
                          Grade School (50 mins.)
                        </MenuItem>
                        <MenuItem value={"H"}>
                          High School (60 mins.)
                        </MenuItem>
                      </Select>
                    </FormControl>
                    <FormControl className={classes.formControl}>
                      <hr />
                      <FormControl className={classes.container}>
                        <InputLabel htmlFor="endTime">
                          Time of Borrowing
                        </InputLabel>
                        <Select value={reservationTime} labelstyle={classes.select} onChange={this.handleChange} inputProps={{ name: "reservationTime", id: "endTime" }}>
                          <MenuItem value={`7:40`}>Period 1</MenuItem>
                          <MenuItem value={`8:20`}>Period 2</MenuItem>
                          <MenuItem value={`9:00`}>Period 3</MenuItem>
                          <MenuItem value={`9:40`}>Period 4</MenuItem>
                          <MenuItem value={`10:20`}>Period 5</MenuItem>
                          <MenuItem value={`11:00`}>Period 6</MenuItem>
                          <MenuItem value={`11:40`}>Period 7</MenuItem>
                        </Select>
                        <FormHelperText id="name-helper-text">
                          The time the reservation ends.
                        </FormHelperText>
                      </FormControl>
                    </FormControl>
                    <FormControl className={classes.formControl}>
                      <InputLabel htmlFor="age-simple">
                        Subject
                      </InputLabel>
                      <Input id="age-simple" placeholder="Subject" onChange={e => this.handleOnChange("subject", e)} />
                      <FormHelperText id="name-helper-text">
                        The subject the carts will be used in
                      </FormHelperText>
                    </FormControl>
                    <FormControl className={classes.formControl}>
                      <TextField id="classroom" label="Classroom" className={classes.textField} value={laboratory} onChange={e => this.handleOnChange("classroom", e)} />
                      <FormHelperText id="name-helper-text">
                        Where the carts will be used
                      </FormHelperText>
                    </FormControl>
                    <FormControl className={classes.container} disabled>
                      <Input id="fromDt" className={classes.textField} value={fromDateTime} onChange={e => this.handleOnChange("fromDt", e)} />
                    </FormControl>
                    <br />
                    <FormControl className={classes.container} disabled>
                      <Input id="toDt" className={classes.textField} value={toDateTime()} onChange={e => this.handleOnChange("toDt", e)} />
                    </FormControl>
                    <Button variant="raised" color="primary" type="submit">
                      Reserve
                    </Button>
                    </form>
                  </FormGroup>
                </div>}
              </Mutation>
            </div>
          </CardContent>
          <CardActions>
            <Dialog open={this.state.open} onClose={this.handleClose} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description">
              <DialogTitle id="alert-dialog-title">
                {"Cart reserved"}
              </DialogTitle>
              <DialogContent>
                <DialogContentText id="alert-dialog-description">
                  You have reserved a cart. Click to confirm.
                </DialogContentText>
              </DialogContent>
              <DialogActions>
                <Button onClick={this.handleClickClose} color="primary">
                  Back
                </Button>
                <Button onClick={(this.props.onSubmit, this.handleClickClose)} color="primary" autoFocus>
                  Confirm
                </Button>
              </DialogActions>
            </Dialog>
          </CardActions>
          <br />
        </Card>
      </Grid>
    </Grid>
  </div>;
        }
  }


    ReserveCartsForm.propTypes = {
      classes: PropTypes.object.isRequired
    };

    export default withStyles(styles)(ReserveCartsForm);