未捕获错误:操作必须是纯对象.使用自定义中间件

Question

这个错误似乎很常见，当我进行一些研究时，我发现它主要是由于省略了middleware(如thunk(或未能调用dispatch函数。即使在尝试检查这些东西之后，我仍然会收到错误

Redux Action
export const signup = (username, email, password, re_password) => async dispatch => {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const body = JSON.stringify({ username, email, password, re_password });
try {

const {data} = await axios.post(`${process.env.REACT_APP_API_URL}/api/users/`, body, config);

console.log(body)
dispatch({
type: SIGNUP_SUCCESS,
payload: data
});
} catch (error) {
dispatch({
type: SIGNUP_FAIL,
payload: error.response && error.response.data.detail
? error.response.data.detail
: error.message,
})
}
};
function RegisterScreen({ signup, isAuthenticated }) {
const [accountCreated, setAccountCreated] = useState(false);
const [username, setUsername] = useState([])
const [email, setEmail] = useState([])
const [password, setPassword] = useState([])
const [re_password, setRe_password] = useState([])
const [message, setMessage] = useState('')

const dispatch = useDispatch()
const auth = useSelector(state => state.auth)
const { error, loading } = auth
const submitHandler = (e) => {
e.preventDefault();
if (password !== re_password) {
setMessage('Both passwords must be the same')
} else {
dispatch(signup(username, email, password, re_password));
setAccountCreated(true);
}
}


return (
<Container className='content auth-container'>
<div className="auth-header text-center mb-4">
<h2 className="auth-header">Sign Up</h2>
<p>Add your deatils to sign up</p>
</div>
{message && <Message variant='danger'>{message}</Message>}
{error && <Message variant='danger'>{error}</Message>}
{loading && <Loader />}
<Form className="auth-form" onSubmit={submitHandler}>
<Form.Group className="mb-3" controlId='name'>
<Form.Control 
className="auth-input search-ppty" 
required
minLength='6'
type="name" 
placeholder="Username" 
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-3" controlId='email'>
<Form.Control
required 
className="auth-input search-ppty" 
type="email" 
placeholder="Email" 
value={email}
onChange={(e) => setEmail(e.target.value)}

/>
</Form.Group>
<Form.Group className="mb-3" controlId="password">
<Form.Control 
className="auth-input search-ppty" 
type="password" 
placeholder="Password" 
value={password}
onChange={(e) => setPassword(e.target.value)}

/>
</Form.Group>
<Form.Group className="mb-3" controlId="passwordConfirm">
<Form.Control 
className="auth-input search-ppty" 
type="password" 
placeholder="Confirm Password" 
value={re_password}
onChange={(e) => setRe_password(e.target.value)}
/>
</Form.Group>
<Button type="submit" className="auth-button">Sign Up</Button>
</Form>
<Row className="p-2">
<Col>
<div className=""> Already have an account? <Link to="/login">Login</Link></div>
</Col>
<Col>

</Col>
</Row>
</Container>

)
}
export default connect(null, {signup}) (RegisterScreen)

Redux商店

import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
const middleware = [thunk]
const store = createStore(
reducer, 
composeWithDevTools(applyMiddleware(...middleware))
)
export default store

我花了几个小时仍然找不到代码中错误的来源。我该如何修复它？

Answer 1

您似乎在混合Redux的两种不同API：hooks API和connectAPI。在使用功能组件时，您根本不需要connect，钩子就足够了，所以尝试用connect删除最后一行(直接导出RegisterScreen(，并删除signup道具(直接使用导入的signup动作创建者(。