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') );

​

这是我第一次使用带有异步操作分派的react钩子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
)