警告：渲染不同组件（`History`）时无法更新组件（`App`）

Question

我实际上正在构建一个井字游戏。但是这个错误实际上并没有让我更新历史记录。当我在学习 Skillshare.com 上的教程时，我和他做了同样的事情。但仍然出现错误。我是 React 的初学者。我使用 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;

这是我的 History.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

Answer 1

问题出在History.js：

onClick={moveTo(move)}

您需要在 onClick 属性中提供一个函数。相反，您正在调用 moveTo 函数并将其返回值作为 onClick 属性传递。

因此，每当 React 呈现 History 组件时，它也会无意中调用 moveTo 函数，从而触发 App 组件中的更新。这就是错误所说的 - 渲染组件时无法更新另一个组件。

要解决此问题，请将 moveTo(move) 更改为 () => moveTo(move)。现在，您将一个函数传递到 onClick 中，该函数将在用户点击时调用 moveTo 函数。工作沙箱：https://codesandbox.io/s/practical-frog-tcyxm?file=/src/components/History.js