我有这样的代码，它创建了一个Player组件，其中包含setSpell方法。

class Player extends React.Component {
    constructor(props) {
        super(props);

        this.setSpell = this.setSpell.bind(this);

        this.state = {

            name: (props.name === undefined) ? 'Tom Default' : props.name,
            speed: 0,
            power: 0,
            health: 100,
            spells: [],

        };

    }//end constructor

    setSpell (spell) {
        let newSpellsArray = this.state.spells.slice();    
        newSpellsArray.push(spell);   
        this.setState({spells: newSpellsArray});
    }

在另一个函数组件中，我写
函数match（）{

const [player1, setPlayer1] = useState(props.p1); where props.p1 is p1=<Player /> component

当我尝试调用

player1.setSpell('spell');

它会显示未捕获的TypeError：player1.setSpell不是一个函数。我该如何修复这个错误？

function Match(props) {

    const [player1, setPlayer1] = useState(props.p1);
    const [player2, setPlayer2] = useState(props.p2);

    const [isOn, setIsOn] = useState(false);
    const [turnCount, setTurnCount] = useState(0);

    useEffect(() => {
        const spell_archive = ['carmelo dragon','frog knight','thunder cloud','poison breath','ooze','refrigerator ice cube soldier'];

        if (isOn) {

            setTurnCount(turnCount+1);

            //draw phase
            if (turnCount===1){
                console.log(player1.props.spells);

                player1.setSpell(randomSpell(spell_archive)); HERE IS THE ISSUE!!!
            }

            setIsOn(false);
        }
    }, [isOn, turnCount, player1]);