React工具函数返回数组解构顺序错乱如何按名称获取方法？

问题根源 #

你当前使用数组返回函数集合+数组解构的写法，本质是依赖数组的位置索引做匹配，只要返回顺序和解构顺序不一致，就会出现方法绑定错误，且无法跳过不需要的前置方法。

最优实现：返回对象替代返回数组 #

对象是键值对结构，解构和访问都按属性名匹配，完全不依赖顺序，也支持按需取需要的方法，和你期望的传统对象调用效果完全一致。

第一步：修改libA的返回值 #

把原来返回数组的逻辑改成返回对象，同时修正原有代码的笔误：

const libA = () => {
  const fnA = () => {
    return // 原有fnA逻辑
  }
  const fnB = () => {
    return // 原有fnB逻辑
  }
  const fnC = () => {
    return // 原有fnC逻辑
  }

  // 原写法：return [fnA, fnB, fbC] （原代码笔误将fnC写成了fbC）
  return { fnA, fnB, fnC }
}

export default libA

第二步：在组件中使用 #

两种用法都支持，完全满足需求：

1. 对象解构用法（顺序无关，按需取用）
   对象解构用{}而非数组的[]，只需要写你要用的方法名，顺序可以随便打乱，不会出现绑定错误：

// 注意导入要和导出匹配：默认导出对应默认导入，不要用花括号
import libA from '../myLib.js'

const compB = () => {
  // 哪怕libA返回10个方法，你只需要fnA和fnC，直接写这两个就行，不用声明其他变量
  // 顺序随便换，比如写成 { fnC, fnA } 也完全正常
  const { fnA, fnC } = libA()

  fnA() // 正确绑定fnA逻辑
  fnC() // 正确绑定fnC逻辑
}

2. 直接属性访问用法（和期望的传统调用方式完全一致）

import libA from '../myLib.js'

const compB = () => {
  // 直接链式调用，不需要提前解构
  libA().fnA()
  libA().fnB()
}

原有代码的其他问题 #

• 原libA返回数组时笔误将fnC写为fbC，会导致fnC引用错误
• 原compB中用命名导入import { libA }，但libA是默认导出，会触发导入错误，要么改成默认导入import libA from '../myLib.js'，要么把libA的导出改成命名导出export const libA = () => {}

内容的提问来源于stack exchange，提问作者Silvio