无效的挂钩调用。但我不知道为什么

Question

你好

我正在制作一个网络应用程序，我试图让视频在播放完后消失，但我遇到了一个无效的钩子调用错误，我在另一个脚本中再次使用了相同的方法，它在那里很好。我需要它是一个函数，而不是一个类。

import './App.css';
import React, { Component, useState } from "react";
import Theanim from './AnimationPicker';
import pullanim from './wishfinal';


export default Animation = (stars) => {
const [displayed, setDisplayed] = useState()
var anim = pullanim(stars);
var Theanimation = Theanim(anim);
return(
<div>
{ displayed && Theanimation}

<button className="closebutton" type="submit" outline onClick={() => setDisplayed(false)}>Close</button>


</div>
);

}

这是动画/动画((代码：

export default function Theanim(anim) {
return(
<div>

<video autoPlay="autoplay" muted className='pullanimation'>
<source src={anim} type="video/mp4" />
Your browser does not support the video tag.
</video>

</div>
);
}

解决这个错误后，我将在视频中添加onEnded((函数。

我确保在函数内部和顶部调用钩子，我不明白为什么它不起作用——这对我来说毫无意义，我在另一个.js脚本中也使用了同样的方法，它也很好：

const MyComponent = () => {
const [displayed, setDisplayed] = useState()
let button;
if(displayed == true){
button = <button className="closebutton" type="submit" outline onClick={() => setDisplayed(false)}>Close</button>
}
return (
<div>
{ displayed && <WishStick /> }
<button id='buttonwish1' className='wishbuttonx1' type='submit'> <img className ='wishbuttonx1img' src={buttonx1} 
outline onClick={() => setDisplayed(true)} /> </button>
{button}

</div>
)

}

编辑：以下是整个错误：https://i.stack.imgur.com/9YyGc.jpg

如果有人能帮助我，我将不胜感激！请记住，我需要它是一个函数，而不是一个类

Answer 1

您完全忽略了react组件如何工作的要点。根据您发布的带有错误的屏幕截图，您正在调用Animation组件中的useState挂钩，但当您使用该组件时，您正在像使用const animationP = Animation(stars)一样使用它，这是一种完全错误的使用react组件的方式。

我会重新发布你的代码，稍微调整一下，看看你应该怎么做。

我想让你注意到当我们使用Theanim组件时道具的传递方式，以及动画通过道具获得星星值的方式。

有关更多信息，您应该阅读这里的组件和道具的反应文档

import "./App.css";
import React, { Component, useState } from "react";
import Theanim from "./AnimationPicker";
import pullanim from "./wishfinal";
const Animation = (props) => {
const [displayed, setDisplayed] = useState();
// if this is still a react component you should use it the same way as <Theanim anim={anim} />
const anim = pullanim(props.stars);
return (
<div>
{displayed && <Theanim anim={anim} />}
<button className="closebutton" type="submit" outline onClick={() => setDisplayed(false)}>
Close
</button>
</div>
);
};
export default Animation;

export default function Theanim(props) {
return (
<div>
<video autoPlay="autoplay" muted className="pullanimation">
<source src={props.anim} type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
);
}