This function always return extra values

Question

While calling the function always get "x" extra added value .

Suppose I have received 3 values on 1st call , next 2nd call I received (3 + 3) values , and on 3rd call (6 + 3) values .

But I want to get always 3 value. Please help.

const drpOptions = await this._getSiteColumnData(); //3 , (3 + n), (6 + n)...

private _getSiteColumnData(): Promise<any> {
    let { drpOptions } = this.state;
    let web = pnp.sp.web;
    return web.fields.getByTitle("xxxxx").get().then(f => {
      //console.log(f.Choices);
      drpOptions = drpOptions.slice().concat(...f.Choices.map((c, i) => ({
        key: i,
        text: c
      })));

      return drpOptions;

    });
  }

Answer 1

I guess you need to clear everything inside drpOptions in _getSiteColumnData function, before concatenating the choices and returning the drpOptions.