最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】Reactjs警告:[eslint] Expected ‘this’ to be used by class method (class-methods-use-this)

ReactJS crifan 921浏览 0评论
Antd Pro中Reactjs的代码出现警告:
  componentDidMount() {
    this.updateFunctionGroupsList(this.fetchFunctionGroupCallback)
  }

    updateFunctionGroupsList(callback=undefined){
...
    if(callback) {
      this.props.dispatch({
        type: 'functionGroup/fetch',
        payload: curQueryParamDict,
      }).then(callback(this));
    }else {
      this.props.dispatch({
        type: 'functionGroup/fetch',
        payload: curQueryParamDict,
      })
    }
  }

  fetchFunctionGroupCallback(curThis){
    // console.log(`fetchFunctionGroupCallback: this=`, this)
    console.log(`fetchFunctionGroupCallback: curThis=`, curThis)
    const { functionGroup: { functionGroups } } = curThis.props;
    console.log(`fetchFunctionGroupCallback: functionGroups=`, functionGroups)
    if (functionGroups.results){
      const functionGroupList = functionGroups.results
      console.log("functionGroupList=", functionGroupList)

      curThis.updateGroupAndMember(functionGroupList)
    }
  }
出现警告:
[eslint] Expected 'this' to be used by class method 'fetchFunctionGroupCallback'. (class-methods-use-this)
然后之前是参考别的做法,去加上了:
/* eslint-disable class-methods-use-this */
/* eslint-disable class-methods-use-this */
很明显:只是取消了警告,没有根本的解决问题。
后来想到了,参考别的代码:
onChange={this.onGroupListChange.bind(this, this.state.groupList)}
在调用时,加上this的bind:
this.updateFunctionGroupsList(this.fetchFunctionGroupCallback.bind(this))
然后callback中,好像也就可以用this了。
好像代码可以继续优化,把bind放在callback调用的地方:
this.updateFunctionGroupsList(this.fetchFunctionGroupCallback)

    if(callback) {
      this.props.dispatch({
        type: 'functionGroup/fetch',
        payload: curQueryParamDict,
      }).then(
        // callback(this)
        callback.bind(this)
    );
也就可以优化,去掉curThis,直接用this了:
  // fetchFunctionGroupCallback(curThis){
    fetchFunctionGroupCallback(){
    console.log(`fetchFunctionGroupCallback: this=`, this)
    // console.log(`fetchFunctionGroupCallback: curThis=`, curThis)
    const { functionGroup: { functionGroups } } = this.props;
    console.log(`fetchFunctionGroupCallback: functionGroups=`, functionGroups)
    if (functionGroups.results){
      const functionGroupList = functionGroups.results
      console.log("functionGroupList=", functionGroupList)

      this.updateGroupAndMember(functionGroupList)
    }
  }
结果:
是可以的,可以把this传递过去:
【总结】
此处Antd Pro的Reactjs中,想要在callback中使用this,且避免eslint的警告:
[eslint] Expected 'this' to be used by class method (class-methods-use-this)
的做法是:
在callback时,加上bind的this:
this.updateFunctionGroupsList(this.fetchFunctionGroupCallback)


  // updateFunctionGroupsList(queryParamDict = {}, callback=undefined){
  updateFunctionGroupsList(callback=undefined){
    // console.log("updateFunctionGroupsList: queryParamDict=", queryParamDict, ", callback=", callback)
    console.log("updateFunctionGroupsList: callback=", callback)

    // Note: here only get SCRIPT function group, omit ADMIN function group
    const FUNCTION_GROUP_FUNCTION_SCRIPT = "1"
    // const curQueryParamDict = queryParamDict
    // curQueryParamDict.function = FUNCTION_GROUP_FUNCTION_SCRIPT
    const curQueryParamDict = {
      "function": FUNCTION_GROUP_FUNCTION_SCRIPT,
    }

    // // Note: when get group list, not consider group_id
    // if (curQueryParamDict.group_id) {
    //   delete curQueryParamDict.group_id
    // }
    console.log(`curQueryParamDict=`, curQueryParamDict)

    if(callback) {
      this.props.dispatch({
        type: 'functionGroup/fetch',
        payload: curQueryParamDict,
      }).then(
        callback.bind(this)
    );
    }else {
      this.props.dispatch({
        type: 'functionGroup/fetch',
        payload: curQueryParamDict,
      })
    }
  }

  fetchFunctionGroupCallback(){
    console.log(`fetchFunctionGroupCallback: this=`, this)
    const { functionGroup: { functionGroups } } = this.props;
    console.log(`functionGroups=`, functionGroups)
    if (functionGroups.results){
      const functionGroupList = functionGroups.results
      console.log("functionGroupList=", functionGroupList)

      this.updateGroupAndMember(functionGroupList)
    }
  }
【后记】
突然发现,此处另外的函数,还是提示同样的警告:
然后才看懂:
提示你这个函数里面,一定要用this
而此处函数中,没有用到this,所以警告。
但是觉得很怪,为何要求我一定要用this呢?
难道是属于Reactjs的类的内部,就一定要用?
或许把函数放到类的外部,就可以消除警告了?
[eslint] Expected ‘this’ to be used by class method (class-methods-use-this)
class-methods-use-this – Rules – ESLint – Pluggable JavaScript linter
class-methods-use-this – Rules – ESLint中文
javascript – Expected ‘this’ to be used by class method – Stack Overflow
eslint – jsf – 关闭Expected ‘this’ to be used by class method这个规则 – ColdFunction
所以解决办法是:
要么是代码里面避免,函数里面没有用到this
要么把函数变成static -》 然后调用的时候就要写成:ClassName.xxx 了
要么是,去.eslintrc.js添加规则,禁止掉:
{
  'rules': {
    "class-methods-use-this": "off",
  }
}
此处选择第二种,变成static
static getGroupMemberList(groupList, selectedGroupId) {
    ...
}
别处之前用this去调用的:
export default class AllScriptList extends PureComponent {
    const curGroupMemberList = this.getGroupMemberList(groupList, value)
}
现在就要改为:
export default class AllScriptList extends PureComponent {
    const curGroupMemberList = 
AllScriptList.getGroupMemberList
(groupList, value)
}
了。
【后记2】
关于this的绑定,后来发现,自己搞错了,原先的代码改为:
componentDidMount() {
    
this.fetchFunctionGroupCallback = this.fetchFunctionGroupCallback.bind(this)
    
this.fetchFunctionGroupsList(this.fetchFunctionGroupCallback)
}
才可以确保,最终的fetchFunctionGroupCallback时,this是全局的this,而不是undefined。
其中最佳做法是在constructor中而不是componentDidMount,去给函数加上bind this会更好。

转载请注明:在路上 » 【已解决】Reactjs警告:[eslint] Expected ‘this’ to be used by class method (class-methods-use-this)

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
86 queries in 0.124 seconds, using 20.69MB memory