Javascript 警告：呈现其他组件（`History`）时无法更新组件（`App`）

我实际上是在做一个井字游戏。但这个错误实际上不允许我更新历史记录。因为我正在关注skillshare.com上的一个教程，我和他做了同样的事情。但还是有错误。我是英语初学者。我用一个nano react npm项目来创建这个项目。 这是App.js：

import React , {useState} from "react";
import Board from "./components/Board"
import History from "./components/History"
import {calculateWinner} from './support'
import StatusMessage from './components/StatusMessage'
import './styles/root.scss'

const NEW_GAME = [
  {
    board: Array(9).fill(null),
    isXNext : true
  }
]
const App = () => {

  const [history, setHistory] = useState(NEW_GAME);
  const [currentMove, setCurrentMove] = useState(0);

  const current = history[currentMove];

  const {winner , winningSquare} = calculateWinner(current.board);
  
  const clickHandleFunction = (position) => {
      if (current.board[position] || winner) {
          return;
      }

      setHistory((prev) => {
        const last = prev[prev.length-1];

          const newBoard =  last.board.map((square, pos) => {
              if (pos === position) {
                  return last.isXNext ? 'X' : '0';
              }
              return square;
          });
          return prev.concat({board: newBoard, isXNext : !last.isXNext})
      });

      setCurrentMove(prev => prev +1);
  };

  const moveTo = (move) => {
    setCurrentMove(move);
  }

  const onNewGame  = () => {
    setHistory(NEW_GAME);
    setCurrentMove(0);
  }

  return(
    <div className="app">
      <h1>TIC TAC TOE</h1>
      <StatusMessage winner ={winner} current ={current}/>
      <Board board = {current.board} clickHandleFunction = {clickHandleFunction} winningSquare = {winningSquare}/>
      <button type="button" onClick = {onNewGame}>Start New Game</button>
      <History history={history} moveTo = {moveTo} currentMove = {currentMove} />
    </div>
  )
}
export default App;

import React，{useState}来自“React”；
从“/组件/板”导入板
从“/components/History”导入历史记录
从“/support”导入{calculateWinner}
从“./components/StatusMessage”导入StatusMessage
导入“./styles/root.scss”
康斯特新游戏=[
{
电路板：阵列（9）。填充（空），
isXNext：对
}
]
常量应用=（）=>{
const[history，setHistory]=useState（新游戏）；
const[currentMove，setCurrentMove]=useState（0）；
const current=历史[currentMove]；
const{winner，winningSquare}=calculateWinner（current.board）；
常量clickHandleFunction=（位置）=>{
if（当前董事会[职位]| |获胜者）{
返回；
}
设置历史记录（（上一个）=>{
const last=prev[prev.length-1]；
const newBoard=最后一个板图（（正方形，位置）=>{
如果（位置===位置）{
返回last.isXNext？'X'：'0'；
}
返回广场；
});
返回上一个concat（{board:newBoard，isXNext:！last.isXNext}）
});
setCurrentMove（prev=>prev+1）；
};
常量moveTo=（move）=>{
setCurrentMove（移动）；
}
const onNewGame=（）=>{
setHistory（新游戏）；
setCurrentMove（0）；
}
返回(
抽搐
开始新游戏
)
}
导出默认应用程序；

这就是我的历史。js：

import React from 'react.'

function History({history, moveTo, currentMove}) {
    return (
        <ul>
            {
                history.map((_, move) => {
                    return( <li key={move}> <button style={{
                        fontWeight: move === currentMove ? 'bold' : 'normal'
                    }} type="button" onClick = {moveTo(move)} > 
                        {move === 0 ? 'Go to game start!': `Gove to move #${move}`} </button> </li> );
                })
            }   
        </ul>
    )
}

export default History

从“React”导入React
函数历史记录（{History，moveTo，currentMove}）{
返回(

{
历史地图（（u，move）=>{
返回（

{move==0？'进入游戏开始！':'Gove to move#${move}}
）；
})
}   

)
}
导出默认历史记录

---

问题出在

History.js

：

onClick={moveTo(move)}

您需要在

onClick

prop中提供一个函数。而是调用

moveTo

函数，并将其返回值作为

onClick

属性传递

因此，每当React呈现历史组件时，它也会无意中调用

moveTo

函数，从而触发应用程序组件中的更新。这就是错误所说的-渲染组件时无法更新其他组件

---

要解决此问题，请将

moveTo（move）

更改为

（）=>moveTo（move）

。现在，将一个函数传递到

onClick

，当用户单击时，该函数将调用

moveTo

函数。工作沙箱：

请给我一个代码沙箱来运行app@ChanghoonLee