React使用useImperativeHandle后父组件无法调用子组件暴露方法问题

问题原因 #

JavaScript 是大小写敏感的编程语言，你在 useImperativeHandle 中暴露的方法名是小写开头的 sortVote，但父组件调用时用了大写开头的 SortVote，二者被识别为完全不同的属性，因此抛出“不是函数”的错误。

解决方法 #

把父组件中的调用代码修改为小写开头即可：

childRef.current.sortVote();

额外优化建议 #

你当前子组件中直接对 props 传入的 articles 调用 sort 方法，Array.sort 是原地排序方法，会直接修改原数组，可能引发不可预期的状态问题，建议排序前先拷贝一份数组再操作：

// 以sortVote方法为例，sortDate同理
const result = [...articles].sort((a, b) => {
  if (a.upvotes > b.upvotes) return -1;
  if (a.upvotes < b.upvotes) return 1;
  return 0;
});

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