我如何在 React js 中使用 useState？

Question

我想在 gatsby js(https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls) 中使用这个简单的代码。

但是球没有用。我认为 useState 的用法是错误的。但我找不到错误的地方。请你帮助我好吗？谢谢

javascript

import * as React from "react"
import {useRef, useEffect, useState} from "react";
import { Container, CanvasBox} from "./style"


const MainView = () => {
  let canvasRef = useRef(null)
  const [x, setValx] = useState(0);
  const [y, setValy] = useState(0);

  useEffect(()=>{
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    let ballRadius = 2;
    let xtemp = canvas.width/2;
    let ytemp = canvas.height-30;
    // console.log('xtemp')
    // console.log(xtemp)
    // console.log(ytemp)
    setValx(xtemp);
    setValy(ytemp);
    let dx = 2;
    let dy = -2;

    function drawBall() {
      context.beginPath();
      context.arc(x, y, ballRadius, 0, Math.PI*2);
      context.fillStyle = "white";
      context.fill();
      context.closePath();
    }

    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();

        if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
            dx = -dx;
        }
        if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
            dy = -dy;
        }

        // console.log('x')
        let xtemp = x + dx
        let ytemp = y + dy;
        console.log('x')
        console.log(x)
        console.log('xtemp')
        console.log(xtemp)
        setValx(xtemp);
        setValy(ytemp);
    }  
    setInterval(draw, 10);
  },[x,y])


  return(
    <>
      <Container>
        <CanvasBox ref={canvasRef} ></CanvasBox>
      </Container>
    </> 
  )
}

export default MainView

css

import styled from "@emotion/styled"


export const Container = styled.div`
    background-color: black;
    margin: 0;
    width: 100vw;
    height: 100vmax;
    max-height: 100vh;
`
export const CanvasBox = styled.canvas`
    width: 100%;
    height: 100%;
    position: absolute;
`

Answer 1

太棒了，我花了一些时间在上面找到了但是还没有完成。

但也许你可以完成它。我不得不说，当您设置 (x,y) 时，您不能期望 x 或 y 具有该值，然后我将它们更改为 xtemp 或 ytemp。

它对我有用，请查看：

import * as React from "react"
import {useRef, useEffect, useState} from "react";
import {Container, CanvasBox} from "./style"


const MainView = () => {
    let canvasRef = useRef(null)

    useEffect(() => {
        const canvas = canvasRef.current;
        const context = canvas.getContext('2d');
        let ballRadius = 2;
        var xtemp = canvas.width / 2;
        var ytemp = canvas.height - 30;

        let dx = 2;
        let dy = -2;

        function drawBall() {
            context.beginPath();
            context.arc(xtemp, ytemp, ballRadius, 0, Math.PI * 2);
            context.fillStyle = "white";
            context.fill();
            context.closePath();
        }

        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();

            if (xtemp + dx > canvas.width - ballRadius || xtemp + dx < ballRadius) {
                dx = -dx;
            }
            if (ytemp + dy > canvas.height - ballRadius || ytemp + dy < ballRadius) {
                dy = -dy;
            }
 
            xtemp = xtemp + dx
            ytemp = ytemp + dy;
        }

        setInterval(draw, 10);
    }, [])


    return (
        <>
            <Container>
                <CanvasBox ref={canvasRef}></CanvasBox>
            </Container>
        </>
    )
}

export default MainView

我如何在 React js 中使用 useState？

How can i use useState in React js?

javascript

reactjs

canvas