值得注意的是，在传奇电话反应之后没有更新

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，而不是创建一个新的

不知道你有什么结构，但是这ATLEAST应该改写

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 
    }) 
}