Как суммировать значение только один раз в реакции - PullRequest
Новая
       28

Как суммировать значение только один раз в реакции

0 голосов
/ 18 января 2020

Я хотел бы знать в моем сценарии: после получения реквизита функция вызывается в методе 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

Ответы [ 2 ]

0 голосов
/ 18 января 2020

Привет @miyavv Посмотрите на фрагмент кода ниже. Сравнение prevProps и текущих реквизитов должно помочь. Это общая техника, используемая в 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>;
        })
      : "";
  }
}

Дайте мне знать, если это поможет !!. Спасибо

0 голосов
/ 18 января 2020

Это потому, что вы отправляете два действия, в результате которых вы будете вызывать componentDidUpdate несколько раз. И в вашем методе componentDidUpdate нет никаких условий, говорящих о том, что ваши данные уже получены. Вы можете вызвать только одно действие, которое будет дополнительно отправлять два действия, которые вы отправляете в методе callFetch. Вы также можете оставить флажок, который будет сообщать, были ли данные извлечены или нет.

Если вы используете redux-thunk, это может быть легко достигнуто. Вы можете определить одно действие, которое будет отправлено в методе callFetch. И в вашем новом определенном действии вы можете отправить два упомянутых вами действия.

...