React通过父组件实现兄弟组件传值及setDisplayGoals不是函数报错解决

问题根因 #

setDisplayGoals is not a function 报错的核心原因是 TeamCard组件的props接收方式错误：
React函数组件只会接收一个props对象作为第一个入参，你现在写的const TeamCard = ({data}, {setDisplayGoals}) => {}相当于把第二个入参当成了接收setDisplayGoals的对象，而React的第二个参数只有在使用forwardRef的时候才会传入ref对象，普通调用下这个值是undefined，自然解构不出setDisplayGoals方法。

修复方案 #

1. 修正TeamCard组件的props接收 #

把两个解构对象合并到第一个入参里即可：

// 错误写法
// const TeamCard = ({data}, {setDisplayGoals}) => {
// 正确写法
const TeamCard = ({data, setDisplayGoals}) => {
  // 原有逻辑保持不变
}

2. 修复父组件TopGroups的隐藏逻辑bug #

你当前父组件还有两处问题需要同步修复，避免后续触发其他报错：

• 加载状态下没有返回Spinner组件，会导致渲染异常：

  if (loading) {
    // 原写法缺少return关键字
    return <Spinner />
  }
  

• 你排序后的sortedGroups仅做了定义没有实际使用，如果要渲染排序后的分组列表，需要把排序后的值替换到TeamCard的渲染逻辑中：

  let sortedGroups = []
  if (data) {
      // 用扩展运算符拷贝原数组避免修改源数据
      sortedGroups = [...data.getGroupScores].sort((a, b) => b.totalScore - a.totalScore)
  }
  // 后续传递给TeamCard时用sortedGroups代替原data.getGroupScores即可
  

3. 修正GoalsDone组件的显示逻辑 #

你当前h1标签里硬编码了75 Goals，会导致传入的displayGoals和固定值拼接异常，按需调整即可：

<h1 className="pt-1"> {displayGoals} Goals</h1>

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