如何在反应redux中只对值求和一次答案

【问题标题】：How to sum the value only once in react redux如何在反应redux中只对值求和一次
【发布时间】：2020-01-18 08:25:29
【问题描述】：

我想在我的场景中知道：收到道具后，函数在compoentdidupdate 方法中被调用，如果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>
   }) : ""
 )
}

收到的道具低于，但在输出中收到1200，并且不断增加，

alldata= [{
  id: 1,
  amount: 200
}, {
  id: 2,
  amount: 400
}]

newdata= [{
 id: "1",
amount: 400
}]

预期输出：

price: 600
price: 400

【问题讨论】：

标签： javascript arrays reactjs redux react-redux

【解决方案1】：

嘿@miyavv 看看下面的代码。比较 prevProps 和 current props 应该会有所帮助。这是 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>;
        })
      : "";
  }
}

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

【讨论】：

【解决方案2】：

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

如果您使用的是 redux-thunk，则可以轻松实现。您可以定义一个将在 callFetch 方法中调度的操作。在您新定义的操作中，您可以调度您提到的两个操作。

【讨论】：