P.s a résolu le problème que j'avais, mais j'aimerais quand même entendre vos réflexions à ce sujet et sur mon code, si vous avez le temps :)

Je ne peux attribuer une valeur à cette variable UNIQUEMENT qu'une fois le rendu terminé, donc je suppose que je dois déclarer cette variable dans useEffect(), et il est impossible de lui attribuer une valeur dans la portée globale (qui est exécutée avant que quoi que ce soit ne soit rendu). Mais je veux aussi utiliser cette variable dans un autre useEffect(), mais je ne peux pas, car elle est déclarée dans une fonction et elle n'appartient pas à la portée globale. Aussi, est-il normal d'avoir deux useEffect -s ? Un dont j'ai besoin pour saisir un contexte de canevas et garder ce contexte cohérent (ne pas en saisir un nouveau à chaque mise à jour du DOM, comme cela se produit lorsque je ne mets pas [] comme deuxième argument du premier useEffect). Et l'autre est de faire les choses avec ce contexte unique au fur et à mesure que l'état change. Est-ce que ça fait du sens? Mon code :

import React, { useState, useRef, useEffect } from "react";
import { degreesToRadiansFlipped } from "./helpers/degreesToRadiansFlipped";
function Circle() {
  let [degree, setDegree] = useState(0);
  const canvas = useRef();
  const inputField = useRef();
  const coordinateX = Math.cos(degreesToRadiansFlipped(degree)) * 100 + 250;
  const coordinateY = Math.sin(degreesToRadiansFlipped(degree)) * 100 + 250;

  useEffect(() => {
    const context = canvas.current.getContext("2d");
    drawCircle(context, coordinateX, coordinateY);
    return context;
    /*return function cleanUp() {
      context.clearRect(0, 0, 500, 500);
      context.beginPath();
      drawCircle(context, coordinateX, coordinateY);
    };*/
  }, []);
  useEffect(() => {
    drawCircle(context, coordinateX, coordinateY);
  }, [degree]);
  let drawCircle = function(context, x, y) {
    context.beginPath();
    //arc has option to make it anti-clockwise, making flipping radians redundant
    context.arc(250, 250, 100, 0, Math.PI * 2);
    context.moveTo(250, 250);
    context.lineTo(x, y);
    context.stroke();
  };

  return (
    <div>
      <canvas ref={canvas} width={500} height={500}></canvas>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          setDegree(inputField.current.value);
        }}
      >
        <input type="text" ref={inputField}></input>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default Circle;
3
Irakli Tchigladze 27 sept. 2019 à 21:47

1 réponse

Meilleure réponse

Oui, il est logique d'avoir plusieurs useEffect, quand ils ont des arguments différents dans le deuxième paramètre comme vous l'avez fait.

Vous pouvez déclarer la variable en dehors de useEffec comme non définie.

let context = undefined // is not constant
  useEffect(() => {
    context = canvas.current.getContext("2d");
    drawCircle(context, coordinateX, coordinateY);
    return context;
    /*return function cleanUp() {
      context.clearRect(0, 0, 500, 500);
      context.beginPath();
      drawCircle(context, coordinateX, coordinateY);
    };*/
  }, []);
  useEffect(() => {
    drawCircle(context, coordinateX, coordinateY);
  }, [degree]);

Cette façon est disponible dans la portée de la fonction

4
Ariel Batista 27 sept. 2019 à 19:32