Невозможно получить обновленное состояние избыточности в состоянии без компонента - PullRequest
0 голосов
/ 25 октября 2018

В моем приложении ReactionJs я использую Redux-Thunk, когда я обновляю избыточное состояние, мой компонент без состояния не получает обновленное значение состояния.
my Addons.js

import React from 'react';
import {connect} from 'react-redux';
import {addOnSelected, addonsCount, updateVehData} from '../../actions'
import { Card,Row,Col,Avatar } from 'antd';
import { Collapse} from 'antd';
const Panel = Collapse.Panel;
import HelperImg from '../../../public/images/Helper.png'

const Addons = (props)=>{
    console.log(props.VehcileData,"asd")
    let addonsCards = [];

    const addonsCard = (addon)=>{
        addonsCards.push(
            <Col lg={{span:7,offset:1}} key={addon.text} style={{paddingBottom:'2rem'}}>
            <Card
            type="inner"
            // title="Small Vehicle"
            id='addonCard'
            hoverable
            onClick={(e)=>{(e.target.id !== 'minus' && e.target.id !== 'adQty' && e.target.id !== 'plus') && props.updateVehData(addon) }}
            className={`${addon.selected ? 'addSelected' :''} ad_card`}
        >
            <Row type="flex" justify="space-around" align="middle" gutter={16}>
                <Col lg={{span:16}} xs={{span:24}} style={{padding:'0px'}} >
                    <div className='ad_img' align='middle'>
                        <Avatar src={HelperImg} />
                    </div>
                    <div align='middle'>
                    <h3 className='ad_title'>{addon.text}</h3>
                    </div>
                </Col>
                <Col lg={{span:16,offset:5}} xs={{span:16,offset:5}}>
                    <div className="input-group">
                        <input type="button" value=" - " id='minus' className="button-minus" onClick={()=>props.addonsCount(addon)}/>
                        <input type="number"  className="quantity-field" id='adQty'/>
                        <input type="button" value="+" className="button-plus" id="plus"/>
                    </div>
                </Col>
                <Col lg={{span:24}} xs={{span:24}} className='price'>
                    <div className='ad_price'>
                        <h3>Price RS 2000</h3>
                    </div>
                </Col>
            </Row>

        </Card>
        </Col>)
    }
    const loopVData =()=>{
        for (const key of Object.keys(props.VehcileData)) {
            if(props.VehcileData[key].vid === props.VSelected){
                props.VehcileData[key].mand.map((addon,i)=>{
                    addonsCard(addon)
                })
                props.VehcileData[key].pre.map((addon,i)=>{
                    addonsCard(addon)
                })

                props.VehcileData[key].optn.map((addon,i)=>{
                    addonsCard(addon)
                })
            }
        }
    }
    return(
        <div>
            <Collapse defaultActiveKey={['1','2']} >
            <Panel header="SELECT ADDONS" key="1">
                <Row >

                    {loopVData()}
                    {addonsCards}
                </Row>
            </Panel>
            </Collapse>
        </div>
    )
}


const mapStateToProps = (state) =>{
    console.log(state.StepThreeReducer.vehcileData)
    return{
        VehcileData:state.StepThreeReducer.vehcileData,
        VSelected:state.StepThreeReducer.isAmbSel
    }
}
export default connect(mapStateToProps,{addOnSelected,addonsCount,updateVehData})(Addons);

my ACTION.js

export function updateVehData(val){
    return function(dispatch,getState){
        if(val.type === 'opt'){
            let VehData = getState().StepThreeReducer.vehcileData;
            let vehID =getState().StepThreeReducer.isAmbSel;            
            for (const key of Object.keys(VehData)) {
                // console.log(VehData[key])
                if(VehData[key].vid === vehID){
                    VehData[key].optn.forEach(addon=>{
                        if(addon._id==val._id){
                            addon.selected = !addon.selected;
                            if(addon.selected === true){
                                addon.qty=1;
                            }else if(addon.selected === true){
                                addon.qty=0;
                            }
                        }
                    });

                }
            }
            dispatch({type:VEHICLEDATA,payload:VehData})
        }
    }
}

my Reducer.js

import {ISAMBSEL,ADDONSEL,TOTALPRICE,VEHICLEDATA} from '../actions/types';
const INITIAL_STATE = {
    isAmbSel:null,
    addonSel:[],
    vehcileData:0,

};
export default  (state=INITIAL_STATE,action) => {
    // console.log(action,'reducer')
    switch(action.type) {
        case ISAMBSEL:
            return {...state,isAmbSel:action.payload};
        case ADDONSEL:
            return {...state,addonSel:[...action.payload]}
        case TOTALPRICE:
            return {...state,totalPrice:action.payload}
        case VEHICLEDATA:{
            return {...state,vehcileData:action.payload}}
        default:
            return state;
    }
}

в моей функции mapStateToProps, если яконсоль state.StepThreeReducer.vehcileData Я получаю обновленное значение, но когда я консоль в компоненте Аддоны , он не показывает значение props.VehcileData даже после обновления состояния приращения, он не рендерит
, но в то же времяродительский компонент показывает обновленное значение состояния редукции, если я отправляю обновленное значение состояния через родительский компонент на мой компонент Addons , тогда также не отображается обновленное значение состояния редукции.
Iдумаю, у меня нет проблем в Actions или Reducer , потому что в mapStateToProps он показывает значение состояния редукции в реальном времени.

1 Ответ

0 голосов
/ 25 октября 2018
let VehData = getState().StepThreeReducer.vehcileData;
let vehID = getState().StepThreeReducer.isAmbSel;
for (const key of Object.keys(VehData)) {
  // console.log(VehData[key])
  if (VehData[key].vid === vehID) {
    VehData[key].optn.forEach(addon => {
      if (addon._id == val._id) {
        addon.selected = !addon.selected;
        if (addon.selected === true) {
          addon.qty = 1; // <-- mutating
        } else if (addon.selected === true) {
          addon.qty = 0; // <-- mutating
        }
      }
    });
  }
}

Когда mapStateToProps получит вызов, он проверит различия между вашими prevState и nextState, чтобы определить, нужно ли обновлять компоненты или нет .

И в вашем случае вы изменяете состояние только здесь, и после обновления в редукторе prevState будет таким же, как и то, что вы обновляете в редукторе.

Вам следует попробовать клонировать его или изменитьпроцедура.

также вы должны иметь промежуточное программное обеспечение (redux-immutable-state-invariant), которое обнаружит мутацию в избыточном и выдает предупреждения.

...