Javascript 反应+；Redux：设置Redux状态或更改Redux状态后，页面不会重新呈现
我正在执行一个api调用函数-Javascript 反应+；Redux：设置Redux状态或更改Redux状态后，页面不会重新呈现,javascript,reactjs,redux,react-redux,redux-saga,Javascript,Reactjs,Redux,React Redux,Redux Saga,我正在执行一个api调用函数-getCountryList（）使用redux传奇获取我的国家/地区列表 componentDidMount（）生命周期方法。用于填充选择框内的国家/地区列表 函数成功运行并设置redux状态，但设置后，我的页面不会自动重新呈现 我的减速机： import { SP_TYPES } from './sp.types'; const INITIAL_STATE = { countryList : [], stateList : [], erro
getCountryList（）使用redux传奇获取我的国家/地区列表
componentDidMount（）
生命周期方法。用于填充选择框内的国家/地区列表
函数成功运行并设置redux状态，但设置后，我的页面不会自动重新呈现
我的减速机：
import { SP_TYPES } from './sp.types';
const INITIAL_STATE = {
countryList : [],
stateList : [],
errorMessage : "",
isLoading : false
}
const ServiceProviderReducer = (state = INITIAL_STATE , action) => {
switch(action.type)
{
case SP_TYPES.GET_COUNTRY_LIST_START :
return {
...state,
isLoading : true
}
case SP_TYPES.GET_COUNTRY_LIST_SUCCESS :
return {
...state,
countryList : action.payload,
isLoading : false
}
case SP_TYPES.GET_COUNTRY_LIST_FAILURE :
return {
...state,
errorMessage : action.payload,
isLoading : false
}
default :
return state;
}
}
export default ServiceProviderReducer;
我的传奇
import { takeLatest, call, put } from 'redux-saga/effects';
import { SP_TYPES } from './sp.types';
import axios from 'axios';
import {
getCountryListSuccess,
getCountryListFailure
} from './sp.actions.js';
const URL = process.env.REACT_APP_BASE_URL;
const getCountryListData = async () => {
return axios({
method : 'get',
url : `${URL}/get_all_countries`
});
}
export function* getCountryListAsync()
{
try{
const { data } = yield call(getCountryListData);
if(data.status === 'success')
{
yield put(getCountryListSuccess(data.data))
}
else
{
yield put(getCountryListFailure())
}
}
catch(er)
{
yield put(getCountryListFailure())
}
}
export function* getCountryListStart()
{
yield takeLatest(SP_TYPES.GET_COUNTRY_LIST_START,getCountryListAsync);
}
我的组件
import React from 'react';
import './add-service-provider-form.styles.scss';
import { withFormik, Form, Field } from 'formik';
import * as yup from 'yup';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { getCountryListStart } from '../../redux/super-admin-section/SP-realted/sp.actions';
import { selectCountryList } from '../../redux/super-admin-section/SP-realted/sp.selectors';
class AddServiceProviderForm extends React.Component {
componentDidMount()
{
const { getCountryList, countryList } = this.props;
console.log('countryList', countryList);
getCountryList();
}
render() {
const { errors, touched, isSubmitting } = this.props;
return (
<Form>
<div className="form-group">
<Field type="text" className="form-control" placeholder="Name" name="name" />
{ touched.name && errors.name && <p className="text-danger">{errors.name}</p> }
</div>
<div className="form-group">
<Field type="text" className="form-control" placeholder="Address One" name="addressOne" />
{ touched.addressOne && errors.addressOne && <p className="text-danger">{errors.addressOne}</p> }
</div>
<div className="form-group">
<Field type="text" className="form-control" placeholder="Address Two" name="addressTwo" />
{ touched.addressTwo && errors.addressTwo && <p className="text-danger">{errors.addressTwo}</p> }
</div>
<div className="form-group">
<Field type="text" className="form-control" placeholder="City" name="city" />
{ touched.city && errors.city && <p className="text-danger">{errors.city}</p> }
</div>
<div className="form-group">
<Field name="country" className="form-control" as="select">
<option value="1">Test</option>
<option value="2">Test 2</option>
</Field>
{ touched.country && errors.country && <p className="text-danger">{errors.country}</p> }
</div>
<div className="form-group">
<Field name="state" className="form-control" as="select">
<option value="1">Test 11</option>
<option value="2">Test 22</option>
</Field>
{ touched.state && errors.state && <p className="text-danger">{errors.state}</p> }
</div>
<div className="form-group">
<Field type="text" className="form-control" placeholder="zip" name="zip" />
{ touched.zip && errors.zip && <p className="text-danger">{errors.zip}</p> }
</div>
<div className="form-group">
<Field type="number" className="form-control" placeholder="Phone Number" name="phoneNumber" />
{ touched.phoneNumber && errors.phoneNumber && <p className="text-danger">{errors.phoneNumber}</p> }
</div>
<div className="form-group">
<Field type="email" className="form-control" placeholder="Email" name="email" />
{ touched.email && errors.email && <p className="text-danger">{errors.email}</p> }
</div>
<div className="form-group">
<input type="submit" className="btn btn-primary form-control" disabled={isSubmitting}/>
</div>
</Form>
);
}
}
const options = {
mapPropsToValues() {
return {
name: "",
addressOne: "",
addressTwo: "",
city: "",
country: "",
state: "",
zip: "",
phoneNumber: "",
email: "",
}
},
handleSubmit({ resetForm, setErrors, setSubmitting} ) {
},
validationSchema : yup.object().shape({
name : yup.string().required('Name is required'),
addressOne: yup.string().required('Address One is required'),
addressTwo: yup.string().required('Address two is required'),
city: yup.string().required('City is required'),
country: yup.string().required('Country is required'),
state: yup.string().required('State is required'),
zip: yup.string().required('ZIP code is required'),
phoneNumber: yup.string().required('Phone Number is required'),
email: yup.string().email('Email is not valid').required('Email is required'),
})
}
const mapDispatchToProps = dispatch => {
return {
getCountryList : () => dispatch(getCountryListStart())
}
}
const mapStateToProps = createStructuredSelector({
countryList : selectCountryList
})
export default connect(mapStateToProps, mapDispatchToProps)(withFormik(options)(AddServiceProviderForm));
从“React”导入React；
导入“./添加服务提供程序表单.styles.scss”；
从'formik'导入{withFormik，Form，Field}；
从“是”以是的形式导入*；
从'react redux'导入{connect}；
从“重新选择”导入{createStructuredSelector}；
从“../../redux/super admin section/SP realted/SP.actions”导入{getCountryListStart}；
从“../../redux/super admin section/SP realted/SP.selectors”导入{selectCountryList}；
类AddServiceProviderForm扩展了React.Component{
componentDidMount（）
{
const{getCountryList，countryList}=this.props；
console.log（'countryList'，countryList）；
getCountryList（）；
}
render（）{
const{errors，toucted，isSubmitting}=this.props；
返回(
{toucted.name&&errors.name&{errors.name}
}
{toucted.addressOne&&errors.addressOne&{errors.addressOne}
}
{toucted.addressTwo&&errors.addressTwo&{errors.addressTwo}
}
{toucted.city&&errors.city&{errors.city}
}
试验
测试2
{toucted.country&&errors.country&{errors.country}
}
测试11
测试22
{toucted.state&&errors.state&{errors.state}
}
{touch.zip&&errors.zip&&p className=“text danger”>{errors.zip}}
{toucted.phoneNumber&&errors.phoneNumber&{errors.phoneNumber}
}
{touch.email&&errors.email&{errors.email}
}
);
}
}
常量选项={
mapPropsToValues（）{
返回{
姓名：“，
地址一：“，
地址二：“，
城市：“，
国家：“，
州：“，
邮政编码：“，
电话号码：“，
电邮：“，
}
},
handleSubmit（{resetForm，setErrors，setSubmitting}）{
},
validationSchema:yup.object（）.shape({
名称：yup.string（）.required（'name is required'），
addressOne:yup.string（）.required（'addressOne是必需的'），
addressTwo:yup.string（）.required（'addressTwo是required'），
城市：yup.string（）.required（'city is required'），
国家/地区：yup.string（）.required（'country is required'），
state:yup.string（）.required（'state is required'），
zip:yup.string（）.required（'需要邮政编码'），
phoneNumber:yup.string（）.required（'需要电话号码'），
email:yup.string（）.email（'电子邮件无效'）.required（'电子邮件是必需的'），
})
}
const mapDispatchToProps=调度=>{
返回{
getCountryList:（）=>调度（getCountryListStart（））
}
}
const mapStateToProps=createStructuredSelector({
countryList：选择countryList
})
导出默认连接（mapStateToProps、mapDispatchToProps）（使用Formik（选项）（AddServiceProviderForm））；
国家/地区列表重复数据集成功重复数据记录器屏幕截图
import React from 'react';
import './add-service-provider-form.styles.scss';
import { withFormik, Form, Field } from 'formik';
import * as yup from 'yup';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { getCountryListStart } from '../../redux/super-admin-section/SP-realted/sp.actions';
import { selectCountryList } from '../../redux/super-admin-section/SP-realted/sp.selectors';
class AddServiceProviderForm extends React.Component {
componentDidMount()
{
const { getCountryList, countryList } = this.props;
console.log('countryList', countryList);
getCountryList();
}
render() {
const { errors, touched, isSubmitting } = this.props;
return (
<Form>
<div className="form-group">
<Field type="text" className="form-control" placeholder="Name" name="name" />
{ touched.name && errors.name && <p className="text-danger">{errors.name}</p> }
</div>
<div className="form-group">
<Field type="text" className="form-control" placeholder="Address One" name="addressOne" />
{ touched.addressOne && errors.addressOne && <p className="text-danger">{errors.addressOne}</p> }
</div>
<div className="form-group">
<Field type="text" className="form-control" placeholder="Address Two" name="addressTwo" />
{ touched.addressTwo && errors.addressTwo && <p className="text-danger">{errors.addressTwo}</p> }
</div>
<div className="form-group">
<Field type="text" className="form-control" placeholder="City" name="city" />
{ touched.city && errors.city && <p className="text-danger">{errors.city}</p> }
</div>
<div className="form-group">
<Field name="country" className="form-control" as="select">
<option value="1">Test</option>
<option value="2">Test 2</option>
</Field>
{ touched.country && errors.country && <p className="text-danger">{errors.country}</p> }
</div>
<div className="form-group">
<Field name="state" className="form-control" as="select">
<option value="1">Test 11</option>
<option value="2">Test 22</option>
</Field>
{ touched.state && errors.state && <p className="text-danger">{errors.state}</p> }
</div>
<div className="form-group">
<Field type="text" className="form-control" placeholder="zip" name="zip" />
{ touched.zip && errors.zip && <p className="text-danger">{errors.zip}</p> }
</div>
<div className="form-group">
<Field type="number" className="form-control" placeholder="Phone Number" name="phoneNumber" />
{ touched.phoneNumber && errors.phoneNumber && <p className="text-danger">{errors.phoneNumber}</p> }
</div>
<div className="form-group">
<Field type="email" className="form-control" placeholder="Email" name="email" />
{ touched.email && errors.email && <p className="text-danger">{errors.email}</p> }
</div>
<div className="form-group">
<input type="submit" className="btn btn-primary form-control" disabled={isSubmitting}/>
</div>
</Form>
);
}
}
const options = {
mapPropsToValues() {
return {
name: "",
addressOne: "",
addressTwo: "",
city: "",
country: "",
state: "",
zip: "",
phoneNumber: "",
email: "",
}
},
handleSubmit({ resetForm, setErrors, setSubmitting} ) {
},
validationSchema : yup.object().shape({
name : yup.string().required('Name is required'),
addressOne: yup.string().required('Address One is required'),
addressTwo: yup.string().required('Address two is required'),
city: yup.string().required('City is required'),
country: yup.string().required('Country is required'),
state: yup.string().required('State is required'),
zip: yup.string().required('ZIP code is required'),
phoneNumber: yup.string().required('Phone Number is required'),
email: yup.string().email('Email is not valid').required('Email is required'),
})
}
const mapDispatchToProps = dispatch => {
return {
getCountryList : () => dispatch(getCountryListStart())
}
}
const mapStateToProps = createStructuredSelector({
countryList : selectCountryList
})
export default connect(mapStateToProps, mapDispatchToProps)(withFormik(options)(AddServiceProviderForm));
在componentDidMount
上执行网络调用，并在componentDidUpdate
中期待更新的countryList
componentDidMount（）
{
const{getCountryList}=this.props；
getCountryList（）；
}
组件更新{
const{countryList}=this.props；
console.log（'countryList'，countryList）；
}
您能演示如何将状态映射到道具吗？最好使用在线编辑器（如codesandbox）提供一个最小的、可复制的示例。@Dugi我现在已经在问题中包含了我的整个组件。。请检查帮助我，我正在使用重新选择插件获取我的国家/地区列表…这是可行的，但请告诉我为什么我必须执行componentDidUpdate（）？，通常在redux状态更改时重新加载页面，对吗？