如何向useSelector调用的selector函数传递多个参数

你原来的写法有两个直接导致运行失败的问题：

1. 箭头函数语法错误：箭头函数省略函数体花括号的简写形式下，不能额外写return关键字，直接写返回值即可；如果要写return必须搭配{}包裹函数体。
2. useSelector的入参规范要求必须传入接收全局state作为唯一参数的函数，你直接执行selectSomethingById(id)时只传入了id参数、没有传入state，执行结果不是符合要求的selector函数，自然无法被useSelector正确调用。

方案1：柯里化高阶函数（完全匹配你预期的调用写法） #

把selector改造成先接收自定义参数、返回标准selector函数的结构即可，不需要额外封装hook，直接就能按你想要的形式调用：

// selector定义：外层接收id等业务参数，返回的内层函数才是真正给useSelector执行的标准selector
const selectSomethingById = (id) => (state) => state.something[id];

// 组件内调用，和你预期的写法完全一致
const targetId = 123; // 这里替换成你实际要查询的id，比如来自props、组件state
const something = useSelector(selectSomethingById(targetId));

提示：如果selector内部有派生计算、或者传入的参数是引用类型（对象/数组），建议搭配reselect创建记忆化selector，避免不必要的重复计算和组件重渲染。

方案2：useSelector回调内传参（无改造适配成本） #

如果不想改普通多参数selector的写法，直接在useSelector的回调里拿到state后手动传参即可，是最通用的兼容写法：

// 保留普通多参数selector的写法，修正语法即可
const selectSomethingById = (state, id) => state.something[id];

// 组件内调用
const targetId = 123;
const something = useSelector((state) => selectSomethingById(state, targetId));

• 不要在组件渲染过程中每次都创建新的未记忆化selector做复杂派生计算，大体积state场景下会产生明显性能损耗
• 如果传入的id是数字、字符串这类基本类型值，上述两种写法都不会产生额外性能问题
• 牢记箭头函数的两种正确返回写法，避免低级语法错误：

  // 简写：无花括号无return，直接写返回值
  const add = (a, b) => a + b;
  // 完整写法：有花括号必须搭配return返回结果
  const addFull = (a, b) => {
    return a + b;
  };
  

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