React Dispatch 异步操作：找不到 react-redux 上下文值;请确保组件包装在<Provider>

Question

我有一个挑战。我使用 React useState 编写了许多组件来管理组件的状态。但是，我需要调度异步操作。每次我尝试这样做时，我都会收到错误"找不到 react-redux 上下文值;请确保组件包装在提供程序中">

这是我的组件之一 signup.jsx 我遇到了错误

import React, {useState} from 'react';
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
import { Button, FormGroup, FormControlLabel, Switch } from '@material-ui/core';
import './SignupPage.scss';
import { useDispatch, useSelector } from "react-redux";
import { auth } from '../../actions/apiRequestAdmin';
const SignupPage = () => {
const dispatch = useDispatch();
const [formState, setFormState] = useState({superAdmin:false, superAdminValue: false, username: '', password: '', name: '' });
const handleSwitchChange = (event)=>{
let [val, newVal] = [event.target.checked, false];
console.log(val,newVal);


if(val === true){
newVal = true;
}
else{
newVal = false
}

setFormState({...formState, superAdmin: newVal, superAdminValue: val});
console.log(formState);

}
const handleInputChange = (e)=>{
if(e.target.name==="name"){
setFormState({...formState, name:e.target.value })
}
if(e.target.name==="username"){
setFormState({...formState, username:e.target.value })
}
if(e.target.name==="password"){
setFormState({...formState, password:e.target.value })
}
}
const handleSubmission=()=>{
const formData = {
username: formState.username,
password: formState.password,
name: formState.name,
superAdmin: formState.superAdminValue
}
console.log(formData);
dispatch(auth('signup'));
}
return(<div className="center-div">
<div className="form-container">
<div id="formHeader" className="centered-text"><h3>Admin Registration</h3></div>
<div id="formbody">
<ValidatorForm
//ref="form"
onSubmit={handleSubmission}
onError={errors => console.log(errors)}>
<TextValidator
className="form-input"
hiddenLabel
variant="outlined"
name="name"
margin="none"
onChange={handleInputChange}
placeholder="Full name"
type="text"
validators={['required']}
errorMessages={['This field is required']}
autoFocus={true}
value={formState.name}
/>
<TextValidator
className="form-input"
hiddenLabel
variant="outlined"
name="username"
margin="none"
placeholder="email address"
type="text"
validators={['required', 'isEmail']}
errorMessages={['This field is required', 'Email is not valid']}
autoFocus={true}
onChange={handleInputChange}
value={formState.username}
/>
<TextValidator
className="form-input"
hiddenLabel
variant="outlined"
name="password"
margin="none"
placeholder="password"
type="password"
validators={['required']}
errorMessages={['This field is required']}
autoFocus={true}
onChange={handleInputChange}
value={formState.password}
/>
<FormGroup row>
<FormControlLabel
control={
<Switch checked={formState.superAdmin} onChange={handleSwitchChange} value={formState.superAdminValue} />
}
label="Super Admin"
/>
</FormGroup>
<div className="center-btn-div" >
<Button className="" type="submit" variant="contained">Register</Button>
</div>
</ValidatorForm>
</div>
</div>
</div>)};
export default SignupPage;
//export default connect(undefined, mapDispatchToProps)(SignupPage);

这是我连接到商店的方式

import React from 'react';
import {Provider} from 'react-redux';
import ReactDom from 'react-dom';
import StoreConfig from './store/StoreConfig';
import AppRouter from './router/router';
import LoginPage from './components/login-page/LoginPage';
import SignupPage from './components/signup-page/SignupPage';
// 
const store = StoreConfig();
console.log(store.getState());

const jsx= (<Provider store={store}>
<AppRouter />
</Provider>);
ReactDom.render(<SignupPage />, document.getElementById('root') );

这是我第一次将反应钩子 useState(( 与异步操作调度一起使用。请问我如何成功调度我的操作？

Answer 1

问题出在代码的这一部分：

const jsx= (<Provider store={store}>
<AppRouter />
</Provider>);
ReactDom.render(<SignupPage />, document.getElementById('root') );

在代码的这一部分，您只将AppRouter包装在<Provider>中，而不是整个组件中。你也没有传给ReactDom.render()你只是传<SignupPage />，这是错误的。一个真实的例子：

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import store from './store'
import App from './App'
const rootElement = document.getElementById('root')
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
)