× TypeError： Object(...) 不是一个函数。Mern 堆栈发布请求，获取不起作用

Question

我正在处理的MERN堆栈得到此错误当尝试在MongoDB中发送post请求以创建新用户时。我得到了这个错误。我不确定为什么会发生这种情况，至少可以说这令人沮丧。我只写了6个月的代码

TypeError: Object(...) is not a function
handleSubmit
src/components/auth/RegistrationForm.js:27
24 |   email: {email},
25 |   password: {password}
26 | }
> 27 | create(user).then((response) => {
| ^  28 |   if (response.error) {
29 |     console.log(response)
30 |   }

这是登记表

import React, { Fragment, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { toast } from 'react-toastify';
import { Button, CustomInput, Form, FormGroup, Input, Label } from 'reactstrap';
import Divider from '../common/Divider';
import SocialAuthButtons from './SocialAuthButtons';
import withRedirect from '../../hoc/withRedirect';
import axios from 'axios'
import create from '../../user/api-user';
const RegistrationForm = ({ setRedirect, setRedirectUrl, layout, hasLabel }) => {
// State

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [isAccepted, setIsAccepted] = useState(false);
const [isDisabled, setIsDisabled] = useState(true);
// Handler
const handleSubmit = e => {
e.preventDefault()
const user = {
email: {email},
password: {password}
}
create(user).then((response) => {
if (response.error) {
console.log(response)
}
})

toast.success(`Successfully registered as ${email}`);
setRedirect(true);
};
useEffect(() => {
setRedirectUrl(`/authentication/${layout}/login`);
}, [setRedirectUrl, layout]); // the array are dependencies that trigger the function setREdirectUrl. good to know
useEffect(() => {
setIsDisabled( !email || !password || !confirmPassword || !isAccepted || password !== confirmPassword);
}, [ email, password, confirmPassword, isAccepted]);
return ( 
<>
<Form onSubmit={handleSubmit}>

<FormGroup>
{hasLabel && <Label>Email address</Label>}
<Input
placeholder={!hasLabel ? 'Email address' : ''}
value={email}
onChange={({ target }) => setEmail(target.value)}
type="email"
/>
</FormGroup>
<div className="form-row">
<FormGroup className="col-6">
{hasLabel && <Label>Password</Label>}
<Input
placeholder={!hasLabel ? 'Password' : ''}
value={password}
onChange={({ target }) => setPassword(target.value)}
type="password"
/>
</FormGroup>
<FormGroup className="col-6">
{hasLabel && <Label>Confirm Password</Label>}
<Input
placeholder={!hasLabel ? 'Confirm Password' : ''}
value={confirmPassword}
onChange={({ target }) => setConfirmPassword(target.value)}
type="password"
/>
</FormGroup>
</div>
<CustomInput
id="customCheckTerms"
label={
<Fragment>
I accept the <Link to="#!">terms</Link> and <Link to="#!">privacy policy</Link>
</Fragment>
}
checked={isAccepted}
onChange={({ target }) => setIsAccepted(target.checked)}
type="checkbox"
/>
<FormGroup>
<Button color="primary" block className="mt-3" disabled={isDisabled}>
Register
</Button>
</FormGroup>
<Divider className="mt-4">or register with</Divider>     
</Form>
<div>
<Form>
<SocialAuthButtons /> 
</Form>
</div>
</>


);
};
RegistrationForm.propTypes = {
setRedirect: PropTypes.func.isRequired,
setRedirectUrl: PropTypes.func.isRequired,
layout: PropTypes.string,
hasLabel: PropTypes.bool
};
RegistrationForm.defaultProps = {
layout: 'basic',
hasLabel: false
};
export default withRedirect(RegistrationForm);

这里是api-user.js

import React from 'react'

const create = async (user) => {
try {
let response = await fetch('/api/user/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
})
return await response.json()
} catch(err) {
console.log(err)
}
}
export default { create }

Answer 1

您正在导出Object中的create方法。因此，您不能像这样调用函数。

解决方案是:

import { create } from '../../user/api-user';

或者，你可以这样做:

import UserApi from '../../user/api-user';
UserApi.create(user).then(...).catch(...);