Javascript 设置间隔似乎只发生一次？反应状态js

我试图在React中创建我自己的Pong版本，就像一个有趣的项目一样，我试图让球每秒钟移动一次。我在我的

游戏
组件中调用
组件willmount（）
，设置处理球移动的间隔。它第一次起作用，但随后球消失，下次不起作用。实际上，我不知道问题是来自
setInterval（）
还是来自
handleBallMove（）
函数，因为它移动球一次，然后清除球，所以它看起来像是再次运行
this.state.ball
被传递到
ball
组件来渲染它，因此它应该重新渲染它，但它不是。有人能帮我吗

代码（在游戏组件中）：

是的，“canvas”是一个定义的元素，是一个
标记。这不是问题所在。其他的事情都是从这个开始的。我的问题是在第一次击球后，球被清除了，但没有重新打球，即使它的道具改变了

编辑：将
Ball
类添加到代码段中，下面是完整的代码

编辑：问题解决了
 再看一眼，我想我知道发生了什么。省去你的痛苦，把你的
球
组件转换成功能组件

组件类可能有一些非常令人困惑的行为。属性更改不会立即触发重新渲染。正是状态更改实现了这一点（由
this.setState（…）
引起）

有必要实现一个静态组件方法，告诉React如何从更新的属性值派生新状态。它的字面意思是。对于管理大量内部状态的更复杂的组件，如果性能对您来说很重要，那么要正确使用该方法可能是件麻烦事

鉴于
Ball
组件的简单性，您最好将其重写为所谓的“完全控制”组件，即状态从组件内部移除，父上下文通过属性设置
Ball
组件的整个状态

我还注意到您的ball组件呈现了一个
标记。这对我来说似乎没有必要。您的球已经知道如何使用正在传递的图形渲染上下文渲染自身。只需使用它并返回
null
：

function Ball(props) {
    const {ball, ctx} = props;

    ctx.clearRect(ball.x, ball.y, 15, 15);
    ctx.fillStyle = "blue";
    ctx.fillRect(ball.x, ball.y, 15, 15)

    // You're using graphics context for rendering. No need for creating HTML element
    return null;
}

有关更多信息，请参见。
Well
setInterval（）
确实有效，因此问题出在代码中。您是否进行过调试，可能是通过
console.log（）
来检查球坐标的值？我进行了调试。我将console.log（）放入setInterval（）中，它只输出了一组球坐标。因为你在做动画，你应该查看一下，因为在浏览器绘制窗口之前调用了它。顺便说一句，你可以在定义setInterval时绑定“this”：
setInterval（this.handleBallMove.bind（this），1000）这是无效代码（未定义ctx），因此需要粘贴实际使用的代码。或者，如果它真的是你的代码，它不工作是正常的。
var c = document.getElementById("canvas");
if (c.getContext) {
  var ctx = c.getContext("2d");
}

function Ball(props) {
    const {ball, ctx} = props;

    ctx.clearRect(ball.x, ball.y, 15, 15);
    ctx.fillStyle = "blue";
    ctx.fillRect(ball.x, ball.y, 15, 15)

    // You're using graphics context for rendering. No need for creating HTML element
    return null;
}