React 在函数之间传递数据

Question

我是 React 的初学者，我想按照官方教程一步一步来：创建井字游戏。我很难，因为我学习使用函数，而不是类。当我尝试实现它时，我收到一个错误“第 7:5 行：'setSquares' 未定义”。我想我需要将一些数据从 RenderSquare 函数传递给 handleClick 但我不知道该怎么做。这是 React 人提供的官方示例：

我的愚蠢代码：

import Square from './Square';
import { useState } from 'react';

function handleClick(i) {
     const squares = squares.slice();
     squares[i] = 'X';
     setSquares({ squares });
}

 function RenderSquare(i) {
 const [squares, setSquares] = useState(Array(9).fill(null));

return (
    <>
        <Square
            value={squares[i]}
            onClick={() => {
                handleClick(i);
            }}
        />
        ;
    </>
   );
 }

Answer 1

在组件的主体中定义handleClick，这样handleClick的作用域就为setSquares。

setSquares({ squares }); 也应该是setSquares(squares);，因为状态是一个数组，而不是一个对象。

function RenderSquare(i) {
    const [squares, setSquares] = useState(Array(9).fill(null));
    function handleClick(i) {
        const squares = squares.slice();
        squares[i] = 'X';
        setSquares(squares);
    }
    return (
        <>
            <Square
                value={squares[i]}
                onClick={() => {
                    handleClick(i);
                }}
            />
       ;
        </>
    );
}

我认为const [squares, setSquares] = useState 行也应该在 parent 组件中并传递给子组件 - 您不希望为每个渲染的正方形创建一个正方形数组，你只需要一个正方形数组。

const App = () => {
    const [squares, setSquares] = useState(Array(9).fill(null));
    return squares.map((val, i) => <Square {...{ i, squares, setSquares }} />);
};
function RenderSquare({ i, squares, setSquares }) {
    function handleClick() {
        const squares = squares.slice();
        squares[i] = 'X';
        setSquares(squares);
    }
    return (
        <>
            <Square
                value={squares[i]}
                onClick={() => {
                    handleClick(i);
                }}
            />
       ;
        </>
    );
}