ReferenceError：在初始化之前无法访问“玩家”

Question

根据您 (StackOverflow) 的建议，我已将我的应用程序重写为 [几个组件]https://codesandbox.io/s/points-scored-forked-brnni?file=/src/components/ScoredPointsList.js:0-561

现在当我运行 yarn start 时，我得到一个参考错误。谷歌搜索后，我尝试了“一切”，包括： 从 npm 更改为 yarn，在 package.json 中更改……但似乎没有任何帮助。

如何更改代码以使其正常工作？

import NewPointsScored from './components/NewPointsScored';
import ScoredPointsList from './components/ScoredPointsList';

function App() {
  const [scorerNumber, setScorerNumber] = useState('');
  const [totPoints, setTotPoints] = useState(0);
  const [players, setPlayers] = useState([]);

  const sortedPlayers = [...players].sort(
    (a, b) => a.scorerNumber - b.scorerNumber
  );
  const onePointHandler = () => {
    // eslint-disable-next-linex
    const players = [...players];

    if (scorerNumber.trim() === 0) {
      return;
    }

    const posit = players
      .map((player) => player.scorerNumber)
      .indexOf(+scorerNumber);
    if (posit !== -1) {
      setPlayers((players) =>
        players.map(
          (player, i) =>
            (i = posit ? {...player, totPoints: player.totPoints + 1} : player)
        )
      );
    } else {
      const newScorer = {
        id: Math.floor(Math.random() * 1000),
        scorerNumber: +scorerNumber,
        totPoints: totPoints + 1,
      };
      setPlayers([...players, newScorer]);
      setTotPoints(totPoints);
    }
    setScorerNumber('');
  };
  const twoPointsHandler = (e) => {
    e.preventDefault();
    console.log('scored 2p');
  };
  const threePointsHandler = (e) => {
    e.preventDefault();
    console.log('3p Made!');
  };
  return (
    <div className="App">
      <NewPointsScored
        setScorerNumber={setScorerNumber}
        scorerNumber={scorerNumber}
        onOneP={onePointHandler}
        onTwoP={twoPointsHandler}
        onThreeP={threePointsHandler}
      />
      <ScoredPointsList sortedPlayers={sortedPlayers} />
    </div>
  );
}

export default App;

提前致谢 问候 彼得

Answer 1

您正在尝试在初始化 player 变量之前对其进行修改，您可以使用Memo（仅在玩家值更改时运行）并在 sortPlayers 可用后修改它，并且您还试图再次初始化导致问题的播放器

const sortedPlayers =useMemo(()=>{
  return players.sort(
    (a, b) => a.scorerNumber - b.scorerNumber
  );
},[players]) 

完整代码：

import NewPointsScored from './components/NewPointsScored';
import ScoredPointsList from './components/ScoredPointsList';
import {useMemo} from 'react'

function App() {
  const [scorerNumber, setScorerNumber] = useState('');
  const [totPoints, setTotPoints] = useState(0);
  const [players, setPlayers] = useState([]);

 const sortedPlayers =useMemo(()=>{
  return players?.sort(
    (a, b) => a.scorerNumber - b.scorerNumber
  );
},[players]) 


const onePointHandler = () => {
    const _players = [...players];

    if (scorerNumber.trim() === 0) {
      return;
    }

    const posit = _players
      .map((player) => player.scorerNumber)
      .indexOf(+scorerNumber);
    if (posit !== -1) {
      setPlayers((players) =>
        players.map(
          (player, i) =>
            (i = posit
              ? { ...player, totPoints: player.totPoints + 1 }
              : player)
        )
      );
    } else {
      const newScorer = {
        id: Math.floor(Math.random() * 1000),
        scorerNumber: +scorerNumber,
        totPoints: totPoints + 1
      };
      setPlayers([..._players, newScorer]);
      setTotPoints(totPoints);
    }
    setScorerNumber("");
  };
  const twoPointsHandler = (e) => {
    e.preventDefault();
    console.log('scored 2p');
  };
  const threePointsHandler = (e) => {
    e.preventDefault();
    console.log('3p Made!');
  };
  return (
    <div className="App">
      <NewPointsScored
        setScorerNumber={setScorerNumber}
        scorerNumber={scorerNumber}
        onOneP={onePointHandler}
        onTwoP={twoPointsHandler}
        onThreeP={threePointsHandler}
      />
      <ScoredPointsList sortedPlayers={sortedPlayers} />
    </div>
  );
}

export default App;

参考沙盒：