代码之家  ›  专栏  ›  技术社区  ›  LowCool

saga调用react redux后未更新值

  •  0
  • LowCool  · 技术社区  · 8 年前

    import { call, put } from 'redux-saga/effects';
    import { update } from '../services/api';
    import * as types from '../constants/actionTypes';
    
    export default function* updateSaga({ value }) {
        try {
    
            const updateData = yield value.map(data =>{ 
    
                return (call(update,data))}
        )
    
            yield [
                put({ type: types.UPDATES, updateData: updateData })
    
            ]
        } catch (error) {
            console.log("porfilingerror",error);
            yield put({
                type: 'FETCH_UPDATE_ERROR',
                error
            });
        }
    }
    

    case types.UPDATES:
           for(var i = 0;i<highestData.channel_mix.length;i++){
               for(var j= 0;j<action.updateData.length;j++){
                   if(highestData.mix[i].pk === action.updateData[j].pk){
                       highestData.mix[i].volume = action.updateData[j].volume;
                       break;
                   }
               }
           }
    
            dashboard_data[0].mix = highestData.mix;
    
            return {...state,
                highestProfiledata:highestData,
                program_data: dashboard_data
    
            }
    

    编辑1:

    这是我的组件代码

    console.log("rendering....")
    return (
          <div id="otherProgram">
            <div className="panel panel-default">
              <div className="panel-heading panel-head">
                <h3 className="panel-title">OTHER DETAILS</h3>
                <Button
                  onClick={() =>
                    this.setState({
                      open: !this.state.open
                    })}
                >
                  <Glyphicon
                    glyph={
                      this.state.open
                        ? 'glyphicon glyphicon-minus'
                        : 'glyphicon glyphicon-plus'
                    }
                  />
                </Button>
              </div>
    
              <Collapse in={this.state.open}>
                <Well>
                  <div className="row other_pgm_data">
                    <div className="col-md-4">
                      <h5> Mix</h5>
                      <div className="other_data_mix">
                        <table className="table table-bordered">
                          <thead>
                            <th />
                            <th>
                              {this.props.Data.year
                                .toString()
                                .substr(0, 4)}{' '}
                              mix
                            </th>
                            <th> Vol. growth </th>
                            <th> Volume </th>
                          </thead>
    
                          <tbody>
                            {this.props.profileData.mix.map(data =>
                              <tr>
                                <td>
                                  {data.name}
                                </td>
                                <td>
                                  {' '}{Math.round(data.volume * 100)}%{' '}
                                </td>
                                <td> {data.volume_growth}%</td>
    
                              </tr>
                            )}
                          </tbody>
                        </table>
                      </div>
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   Yury Tarabanko    8 年前

    看起来你正在变异 highestData 而不是创建一个新的

    不确定你有什么结构,但至少应该重写

    for(var i = 0;i<highestData.channel_mix.length;i++){
           for(var j= 0;j<action.updateData.length;j++){
               if(highestData.mix[i].pk === action.updateData[j].pk){
                   highestData.mix[i].volume = action.updateData[j].volume;
                   break;
               }
           }
       }
    

    highestData = {
      ...highestData ,
      mix: highestDat.mix.map(channel => {
         const update = action.updateData.find(({pk}) => channel.pk === pk)
         if(update)
           return {...channel, volume: update.volume}
         return channel
      })
    }