React路由组件间传递selectedArray失败问题求助

问题根源 #

1. SelectTheMode组件内部单独维护了selectedArray状态，没有使用App组件传递的setSelectedArray更新全局状态，导致App中的selectedArray始终是初始值，Game组件自然拿不到正确数据。
2. 缺少从SelectTheMode到Game页面的跳转逻辑，用户选择模式后无法进入Game页面查看数据。

修复步骤 #

1. 修改SelectTheMode组件 #

移除内部的selectedArray状态，使用App传递的setSelectedArray更新全局状态，并添加页面跳转逻辑：

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom'

const SelectTheMode = ({ setSelectedArray }) => {
  const [tabIndexSelected, setTabIndexSelected] = useState(false);
  const history = useHistory();

  const handleDivClick = (arrayName) => {
    // 更新App中的全局状态
    setSelectedArray(arrayName);
    setTabIndexSelected(true);
    // 跳转到Game页面
    history.push('/game');
  };

  return (
    <div>
      <header>
        <h1>Выбери режим игры</h1>
      </header>
      <div onClick={() => handleDivClick("Array1")} tabIndex="1" className='ModeContainer'>
        <h1>👍</h1>
        <h2>Базовый</h2>
        <h4>Lorem ipsum dolor sit amet, consectetur.</h4>
      </div>
    </div>
  )
}

export default SelectTheMode;

2. 调整App组件的初始状态（可选但更统一） #

将App中selectedArray的初始值改为空字符串，和原组件逻辑保持一致：

import React, { useState } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import './App.css';
import AddTeams from './Pages/AddTeams';
import SelectTheMode from './Pages/SelectTheMode';
import Game from './Pages/Game';

function App() {
  // 初始值改为空字符串，与原组件初始状态一致
  const [selectedArray, setSelectedArray] = useState("");

  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <SelectTheMode setSelectedArray={setSelectedArray}/>
        </Route>
        <Route path="/teams" component={AddTeams}/>
        <Route path="/game">
          <Game selectedArray={selectedArray}/>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

3. Game组件无需修改 #

原Game组件的接收逻辑是正确的，状态更新后会自动渲染最新的selectedArray值。

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