Question

我正在使用react-redux和redux-saga。现在我有问题，我有Modal更新多个值，并多次点击保存传奇调用，并反映页面上的更新值。但点击保存它不是更新页面上的值。我需要做一些重新加载页面，即刷新，但理想情况下我的DOM应该重新呈现它，不应该吗？这是我的传奇

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>

Answer 1

看起来你正在改变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
  })
}

在saga调用react-redux之后，值不会被更新

1 个答案: