无法在箭头函数中调用 useState 钩子

Question

Im currently trying to implement the tic tac toe example from react but using hooks and ES6 standards but I cant seem to be able to call useState. I keep getting these errors:

Line 6:33: React Hook "useState" is called in function "game" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

My current versions are:
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"

This is my current code:

import React, { useState } from "react";
import Restart from "../../Components/Restart/Restart";
import Square from "../../Components/Square/Square";

const game = () => {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [isXNext, setIsXNext] = useState(true);
  const nextSymbol = isXNext ? "X" : "O";
  const winner = calculateWinner(squares);
  ...
  return (
    <div className="container">
  );
};

Thanks a lot!

Answer 1

You need to capitalize the component name. Link to the docs