Javascript 如何在react redux中仅对值求和一次

在我的场景中，我想知道：在收到道具后，函数在

componentdiddupdate

方法中被调用，在该方法中，如果

id

相同，我会将金额相加，但它会在加载时多次添加值。如何解决这个问题

class Data extends React.PureComponent{
constructor(props){
 super(props);
 this.state={
   total: "";
 }
}
componentDidMount() {
  this.callFetch();
}
callFetch(){
  this.props.dispatch(getData("all"));
 this.props.dispatch(newData("new"));  
}
componentDidUpdate(){
  const { alldata, newdata } = this.props.query;
  const obj =[...alldata, ...newdata];
  const result=[];
 if(obj.length > 0) {
  obj.forEach(function (o) {
      var existing = result.filter(function (i) { return i.id=== o.id})[0];
      if (!existing)
        result.push(o);
      else
        existing.amount+= o.amount;
    });
   this.setState({total: result})
  }
}

render(){
 return(
   this.state.total.length > 0 ?
   this.state.total.map(e=>{
     <div>price:{e.amount}</div>
   }) : ""
 )
}

预期产出：

price: 600
price: 400

---

这是因为您正在调度两个操作，这将导致多次调用componentDidUpdate。在componentDidUpdate方法中，没有条件告诉您的数据已经被获取。 您只能调用一个操作，该操作将进一步分派在callFetch方法中分派的两个操作。您还可以保留一个标志，用于指示数据是否已提取

---

如果您使用的是redux thunk，那么很容易实现。您可以定义一个将在callFetch方法中调度的操作。在您新定义的操作中，您可以分派您提到的两个操作。

Hey@miyavv看看下面的代码。比较以前的道具和当前的道具会有所帮助。这是reactjs中用于解决componentDidUpdate中不需要的运行的通用技术

class Data extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      total: ""
    };
  }
  componentDidMount() {
    this.callFetch();
  }
  callFetch() {
    this.props.dispatch(getData("all"));
    this.props.dispatch(newData("new"));
  }
  componentDidUpdate(prevProps) {
    const { alldata, newdata } = this.props.query;
    const obj = [...alldata, ...newdata];
    const result = [];
    // new Line added
    const { alldata: prevAllData, newdata: prevNewData } = prevProps.query;
    if (prevAllData !== alldata || prevNewData !== newdata) {
      if (obj.length > 0) {
        obj.forEach(function(o) {
          var existing = result.filter(function(i) {
            return i.id === o.id;
          })[0];
          if (!existing) result.push(o);
          else existing.amount += o.amount;
        });
        this.setState({ total: result });
      }
    }
  }

  render() {
    return this.state.total.length > 0
      ? this.state.total.map(e => {
          <div>price:{e.amount}</div>;
        })
      : "";
  }
}

类数据扩展React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
总数：“”
};
}
componentDidMount（）{
这是callFetch（）；
}
callFetch（）{
此.props.dispatch（getData（“全部”））；
此.props.dispatch（新数据（“新”））；
}
componentDidUpdate（prevProps）{
const{alldata，newdata}=this.props.query；
常量obj=[…所有数据，…新数据]；
常量结果=[]；
//新增一行
const{alldata:prevAllData，newdata:prevNewData}=prevProps.query；
如果（prevAllData！==alldata | | prevNewData！==newdata）{
如果（对象长度>0）{
对象forEach（函数（o）{
var existing=result.filter（函数（i）{
返回i.id==o.id；
})[0];
如果（！现有）结果推送（o）；
其他现有金额+=o.amount；
});
this.setState（{total:result}）；
}
}
}
render（）{
返回this.state.total.length>0
？this.state.total.map（e=>{
价格：{e.amount}；
})
: "";
}
}

如果有帮助，请告诉我！！。谢谢

class Data extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      total: ""
    };
  }
  componentDidMount() {
    this.callFetch();
  }
  callFetch() {
    this.props.dispatch(getData("all"));
    this.props.dispatch(newData("new"));
  }
  componentDidUpdate(prevProps) {
    const { alldata, newdata } = this.props.query;
    const obj = [...alldata, ...newdata];
    const result = [];
    // new Line added
    const { alldata: prevAllData, newdata: prevNewData } = prevProps.query;
    if (prevAllData !== alldata || prevNewData !== newdata) {
      if (obj.length > 0) {
        obj.forEach(function(o) {
          var existing = result.filter(function(i) {
            return i.id === o.id;
          })[0];
          if (!existing) result.push(o);
          else existing.amount += o.amount;
        });
        this.setState({ total: result });
      }
    }
  }

  render() {
    return this.state.total.length > 0
      ? this.state.total.map(e => {
          <div>price:{e.amount}</div>;
        })
      : "";
  }
}