React组件未随变量更新重渲染：渲染依赖变量非空问题求助

问题根本原因 #

• React组件只会在自身、祖先组件的state或props更新时触发重渲染，你定义在所有组件外部的sender是普通全局变量，修改它不会触发任何组件的重渲染逻辑
• 你在PlayerNumber组件内更新的garbage是该组件的私有状态，只会触发PlayerNumber自身重渲染，父组件Main完全感知不到这次修改，因此Main内的!sender判断逻辑永远不会重新执行，会一直显示PlayerNumber组件
• 核心问题：你把渲染依赖的状态存在了React的状态管理体系之外，React无法跟踪这个变量的变更

解决方案（状态提升，最符合React数据流规范） #

第一步：将sender定义为Main组件的state，将修改方法传给PlayerNumber #

修改后的Main组件代码：

import { useState } from 'react'
// 引入路径根据你的项目结构调整
import PlayerNumber from './PlayerNumber'

function Main() {
  // 把sender定义为Main的状态，修改它会触发Main重渲染
  const [sender, setSender] = useState(null)
    
  return (
    <div>
      {/* 将修改sender的方法通过props传给子组件 */}
      {!sender && <PlayerNumber setSender={setSender} /> }
    </div>
  )
}

第二步：修改PlayerNumber组件，用传入的方法更新状态，删除无用的garbage状态 #

修改后的PlayerNumber组件代码：

import { useState } from 'react'

// 接收父组件传过来的setSender方法
const PlayerNumber = ({ setSender }) => {
  const [radio, setRadio] = useState(null)

  return (
    <div>
        <div>
            <header>
                <h1 className="center">players {radio}</h1>
                </header>
                <div className="water">
                <h2>Select # of Players</h2>
                <form className="horizontal" onChange={(event) => setRadio(parseInt(event.target.value))}>
                <div className="royal">
                    <input name="jk" id="one" value="1" type="radio"  />
                    <label htmlFor="one"> 1 </label>
                </div>
                <div className="royal">
                    <input name="jk" id="two" value="2" type="radio"  />
                    <label htmlFor="two"> 2 </label>
                </div>
                <div className="royal">
                    <input name="jk" id="three" value="3" type="radio" />
                    <label htmlFor="three"> 3 </label>
                </div>
                <div className="royal">
                    <input name="jk" id="four" value="4" type="radio" />
                    <label htmlFor="four"> 4 </label>
                </div>
                </form>
                <br />
                <button className="fire" onClick={() => {
                    // 调用父组件的状态更新方法，触发Main重渲染
                    setSender(radio)
                    }}>✔️OK</button>
            </div>
        </div>
    </div>
)}

内容的提问来源于stack exchange，提问作者J. Lobo