NextJS中如何跨组件访问setScoreState的prevS变量值

你当前的实现存在两个核心问题：

• btnRotate.jsx和Img.jsx中各自独立声明了scoreState，二者是完全隔离的组件私有状态，不存在关联
• prevS是setScoreState回调函数的临时入参，作用域仅局限在当前回调内部，无法被外部组件直接访问

方案1：状态提升（优先推荐，适配组件层级较近的场景） #

将scoreState的定义移动到两个组件的最近公共父组件中统一维护，通过props将状态、更新方法下发给两个子组件。如果需要获取更新前的分值（即你需要的prevS），可以搭配useRef存储上一次的状态值，所有子组件都可以通过props访问到该值。
父组件核心实现代码：

import { useState, useRef } from 'react'
import BtnRotate from './btnRotate'
import Img from './Img'

export default function CommonParent() {
  const [scoreState, setScoreState] = useState(1)
  // 存储更新前的分值，对应原逻辑中的prevS
  const prevScoreRef = useRef(1)

  // 包装状态更新方法，自动记录更新前的值
  const updateScore = (updater) => {
    setScoreState(prev => {
      const nextValue = typeof updater === 'function' ? updater(prev) : updater
      prevScoreRef.current = prev
      return nextValue
    })
  }

  return (
    <div>
      <Img 
        // 原有传入参数保留
        i={i}
        lengthArr={lengthArr}
        scoreState={scoreState}
        prevScore={prevScoreRef.current}
      />
      <BtnRotate setScoreState={updateScore} />
    </div>
  )
}

调整后btnRotate.jsx不需要修改原有状态更新逻辑，直接调用父组件传入的setScoreState即可；Img.jsx中删除自身独立定义的scoreState，直接通过props取prevScore就能拿到你需要的回调内prevS的值。

方案2：Context跨层传递（适配组件嵌套层级深的场景） #

如果两个组件间隔层级较多，逐层传props维护成本高，可以创建分数专属的Context，将状态、更新方法、prev值统一放在Context容器中，任意层级的子组件都可以直接调用取值，不需要逐层透传props。
核心实现代码：

// /context/ScoreContext.js
import { createContext, useContext, useState, useRef } from 'react'

const ScoreContext = createContext(null)

export function ScoreProvider({ children }) {
  const [scoreState, setScoreState] = useState(1)
  const prevScoreRef = useRef(1)

  const updateScore = (updater) => {
    setScoreState(prev => {
      const nextValue = typeof updater === 'function' ? updater(prev) : updater
      prevScoreRef.current = prev
      return nextValue
    })
  }

  return (
    <ScoreContext.Provider value={{
      scoreState,
      setScoreState: updateScore,
      prevScore: prevScoreRef.current
    }}>
      {children}
    </ScoreContext.Provider>
  )
}

// 封装自定义调用hook
export function useScore() {
  return useContext(ScoreContext)
}

使用时将两个组件包裹在ScoreProvider作用域内即可：

// 上层页面/组件
import { ScoreProvider } from './context/ScoreContext'
import BtnRotate from './btnRotate'
import Img from './Img'

export default function Page() {
  return (
    <ScoreProvider>
      <Img i={xxx} lengthArr={xxx} />
      <BtnRotate />
    </ScoreProvider>
  )
}

在btnRotate.jsx中直接通过const { setScoreState } = useScore()获取更新方法，原有更新逻辑不需要改动；在Img.jsx中通过const { prevScore, scoreState } = useScore()即可直接拿到需要的prevS值，不需要在组件内部重复定义状态。

方案3：轻量状态管理库（适配中大型项目多组件共享状态场景） #

如果项目中存在大量跨组件共享的状态，可以引入Zustand、Jotai这类轻量全局状态管理库，统一维护分数状态与prev值，不需要手动处理状态提升、Context的封装逻辑，适合复杂度较高的项目使用。

注意：不要通过全局变量、DOM自定义属性这类脱离React数据流的方式传值，这类方式不会触发组件重渲染，很容易出现值不同步的bug。

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