Question

在调用api之前，我有一个充当焦点的函数。

我想通过简化我的if语句来减轻肿胀。

目前，我有一份声明清单。其中2个显示如下

    if (this.props.source === 1) {
      api.updateData01(id, data).then(res => {
        this.hideModal()
        this.props.updateData01()
        console.log('DATA UPDATED')
      })
    }
    if (this.props.source === 2) {
      api.updateData02(id, data).then(res => {
        this.hideModal()
        this.props.updateData02()
        console.log('DATA UPDATED')
      })
    }

我想通过调出if语句来简化它，而是动态地重命名这些函数。

类似的东西

    if(this.props.source === 1){
      //rename updateData to updateData01
    }
    if(this.props.source === 2){
      //rename updateData to updateData02
    }

    api.updateData01(id, data).then(res => {
      this.hideModal()
      this.props.updateData01()
      console.log('DATA UPDATED')
    })

我从不需要重命名函数，因此不确定如何开始。

我已经尝试过类似的操作，但是显然行不通。

   if(this.props.source === 1){
      const dataSource = 01
    }
   api.updateData + datasource + (.....

Answer 1

您可以使用dynamic property names来基于哈希（api）访问正确的功能，而不必重命名功能

const api = {
    updateData01 : () =>{},
    updateData02 : () =>{},
    /*...*/
    updateData0N : () =>{}
}

api[`updateData0${this.props.source}`]().then(/*...*/)

Answer 2

@Dupocas方法可能是我会采用的方法。也就是说，也可以使用数组来完成此操作：

// your updateData prop would look something like this:
// this.props.arrFn = [() => console.log('1'), () => console.log('2')]

const fireByDataSource = (source) => this.props.arrFn[source - 1](id, data)

componentDidMount() {
    if(this.props.source) return fireByDataSource(this.props.source)

    api.updateData01(id, data).then(res => {
      this.hideModal()
      fireByDataSource(1)
      console.log('DATA UPDATED')
    })
}

如何动态更改函数名称

2 个答案: