Apollo 400错误异常:TypeError:在严格模式功能下可能无法访问“ caller”,“ callee”和“ arguments”属性

时间:2019-01-19 05:40:31

标签: reactjs graphql apollo

这些变异在操场上起作用,但在我的组件中却不起作用。没有其他详细信息,这是400错误。突变看起来还可以。请帮忙!

解析器中的服务器突变代码

Mutation: { 
    addProduct: async (_, { input }) => {
      console.log('in new prod');
      const product = await new Product(input);

      return product.save();
    },

客户突变:

export const addProductMutation = gql`
  mutation addProduct($productDetails: productDetails!) {
    addProduct(input: $productDetails)
  }
`;

下面是组件代码     从'react'导入React,{组件};     从'@ material-ui / core / TextField / TextField'导入TextField     从'react-apollo'导入{compose,graphql}     从'@ material-ui / core / styles'导入{withStyles}     从'@ material-ui / core / Button'导入Button;     从'react-number-format'导入NumberFormat;     从'prop-types'导入PropTypes;     从'../../../api'导入{addProductMutation};

const styles = theme => ({
    container: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    textField: {
        marginLeft: theme.spacing.unit,
        marginRight: theme.spacing.unit,
        width: 200,
    },
    dense: {
        marginTop: 19,
    },
    menu: {
        width: 200,
    },
});

function NumberFormatCustom(props) {
    const { inputRef, onChange, ...other } = props;

    return (
        <NumberFormat
            {...other}
            getInputRef={inputRef}
            onValueChange={values => {
                onChange({
                    target: {
                        value: values.value,
                    },
                });
            }}
            // thousandSeparator
            // prefix=""
            decimalScale={2}

        />
    );
}

function NumberFormatNoDecimal(props) {
    const { inputRef, onChange, ...other } = props;

    return (
        <NumberFormat
            {...other}
            getInputRef={inputRef}
            onValueChange={values => {
                onChange({
                    target: {
                        value: values.value,
                    },
                });
            }}
            // thousandSeparator
            // prefix=""
            decimalScale={0}

        />
    );
}

NumberFormatCustom.propTypes = {
    inputRef: PropTypes.func.isRequired,
    onChange: PropTypes.func.isRequired,
};


class ProductDetailsForm extends Component {

    constructor(props){
        super(props);

        this.state = {
            name: "",
            description: "",
            price: "",
            sku: "",
            mrp: "",
            in_stock: "",
            status: ""
        }
    }

    displayCategories() {

        let data = this.props.getCategoriesQuery;
        if (data.loading) {

            return (<option>Loading...</option>)
        } else {

            return data.categories.map(category => {

                return (<option key={category.id} value={category.id} >{category.name}</option>)
            });
        }

    }

    submitForm(e){

        e.preventDefault();
        console.log('submitForm');
        console.log(this.state);

        this.props.addProductMutation({
            variables: {
                productDetails: {
                    name: this.state.name,
                    description: this.state.description,
                    sku: this.state.sku,
                    price: this.state.price,
                    mrp: this.state.mrp,
                    status: this.state.status,
                    in_stock: this.state.in_stock,
                }
            }
        }).then((result) => {

            console.log(result)

        }).catch((err) => {
            console.log('ERRRRR')
            console.log(err)
        });

    }

    render() {

        console.log(this.props)
        // console.log(this.state)
        const { classes, values, handleChange, numberformat } = this.props;

        return (
            <React.Fragment >
                <br />
                <h2>Add Product Details - Step 1 </h2>
                <TextField
                    id="standard-name"
                    label="Name"
                    className={classes.textField}
                    defaultValue={values.name}
                    onChange={(e) => this.setState({name: e.target.value})}
                    margin="normal"
                />
                <br />
                <TextField
                    id="in_stock"
                    label="Units In Stock"
                    className={classes.textField}
                    defaultValue={values.in_stock}
                    InputProps={{
                        inputComponent: NumberFormatNoDecimal,
                    }}
                    value={numberformat}
                    onChange={(e) => this.setState({in_stock: e.target.value})}
                    margin="normal"
                />
                <br />
                <TextField
                    id="description"
                    label="Description"
                    multiline
                    className={classes.textField}
                    defaultValue={values.description}
                    onChange={(e) => this.setState({description: e.target.value})}
                    margin="normal"
                />
                <br />
                <TextField
                    id="sku"
                    label="SKU"
                    className={classes.textField}
                    defaultValue={values.sku}
                    onChange={(e) => this.setState({sku: e.target.value})}
                    margin="normal"
                />
                <br />
                <TextField
                    id="price"
                    label="Price"
                    className={classes.textField}
                    defaultValue={values.price}
                    onChange={(e) => this.setState({price: e.target.value})}
                    InputProps={{
                        inputComponent: NumberFormatCustom,
                    }}
                    margin="normal"
                />
                <br />
                <TextField
                    id="mrp"
                    label="MRP"
                    className={classes.textField}
                    defaultValue={values.mrp}
                    onChange={(e) => this.setState({mrp: e.target.value})}
                    InputProps={{
                        inputComponent: NumberFormatCustom,
                    }}
                    margin="normal"
                />
                <br />
                <TextField
                    id="status"
                    label="Status"
                    className={classes.textField}
                    defaultValue={values.status}
                    onChange={(e) => this.setState({status: e.target.value})}
                    margin="normal"
                />
                <br />
                <br />
                <Button onClick={this.submitForm.bind(this)} variant="contained" color="primary" className={classes.button}>
                    Continue
                </Button>
            </React.Fragment>
        )
    }
}

export default compose(
    withStyles(styles),
    // graphql(getCategoriesQuery, {name: "getCategoriesQuery"}),
    graphql(addProductMutation, {name: "addProductMutation"})
)(ProductDetailsForm);

0 个答案:

没有答案