установка состояния с помощью onChange в React приводит к отсутствию холста

Question

У меня есть простое приложение, состоящее из компонентов родительского приложения и дочернего круга.Моя цель состоит в том, чтобы нарисовать круг на холсте (компонент Circle делает это) и иметь ввод, который принимает числовое значение и устанавливает угол этого числового значения с радиусом.вот так: пример

Проблема в , я настроил прослушиватель события onChange с обработчиком на входе, который должен обновлять мое состояние, но всякий раз, когда явведите что-то в поле ввода, это говорит мне, что мой холст имеет значение null, и метод .getContext ("2d") не может быть выполнен, что портит все приложение.Я гуглил и обнаружил, что это из-за того, что canvas рендерит после обновления состояния , или что-то в этом роде.Я не могу придумать никакого решения, которое сделало бы это возможным.вот мой код:

App.js

import React, { Component } from "react";
import "./App.css";
import { degreesToRadiansFlipped } from "./helpers/helpers";
import Circle from "./components/Circle";
class App extends Component {
  state = { degrees: 0 };
  handleChange = (event) => {
    this.setState({ degrees: event.target.value });
  };

  coordinates = {
    x: Math.cos(degreesToRadiansFlipped(120)) * 100 + 150,
    y: Math.sin(degreesToRadiansFlipped(120)) * 100 + 150
  };
  drawCircle = (context, x, y) => {
    context.beginPath();
    context.arc(150, 150, 100, 0, Math.PI * 2);
    context.moveTo(150, 150);
    context.lineTo(x, y);
    context.stroke();
  };
  render() {
    console.log(this.currentDegreeValue);
    return (
      <div className="main">
        <Circle drawCircle={this.drawCircle} coordinates={this.coordinates} />
        <form>
          <input name="degrees" type="text" onChange={this.handleChange} />
        </form>
      </div>
    );
  }
}

export default App; 

Circle.js

import React, { Component } from "react";
class Circle extends Component {
  componentDidMount() {
    this.props.drawCircle(
      this.context,
      this.props.coordinates.x,
      this.props.coordinates.y
    );
  }
  render() {
    return (
      <canvas
        ref={(canvas) => (this.context = canvas.getContext("2d"))}
        width={300}
        height={300}
      />
    );
  }
}

export default Circle;

Фактическая ошибка:

Ошибка типа: не удается прочитать свойство 'getContext' с нулевым значением

Answer 1

// index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Circle from "./Circle";

class App extends Component {
  state = { degrees: 0, showCirle: false };
  handleChange = event => {
    this.setState({ degrees: event.target.value, showCirle: true });
  };
  degreesToRadiansFlipped(angle) {
    return (angle + Math.PI) % (2 * Math.PI);
  }
  coordinates = {
    x: Math.cos(this.degreesToRadiansFlipped(120)) * 100 + 150,
    y: Math.sin(this.degreesToRadiansFlipped(120)) * 100 + 150
  };
  drawCircle = (context, x, y) => {
    console.log("inside drawcircle");
    context.beginPath();
    context.arc(150, 150, 100, 0, Math.PI * 2);
    context.moveTo(150, 150);
    context.lineTo(x, y);
    context.stroke();
  };
  render() {
    console.log(this.currentDegreeValue);
    return (
      <div className="main">
        {this.state.showCirle && (
          <Circle drawCircle={this.drawCircle} coordinates={this.coordinates} />
        )}
        <form>
          <input name="degrees" type="text" onChange={this.handleChange} />
        </form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

// Компонент Circel

import React, { Component } from "react";
class Circle extends Component {
  constructor(props) {
    super(props);
  }
  fillContext = () => {
    const canvas = this.refs.canvas
    const ctx = canvas.getContext("2d")
    this.context = ctx
    this.props.drawCircle(
      this.context,
      this.props.coordinates.x,
      this.props.coordinates.y
    );
  }

  componentDidMount() {
    this.fillContext()
  }
  componentDidUpdate() {
    this.fillContext()
  }
  render() {
    return <canvas ref="canvas" width={300} height={300} />;
  }
}

export default Circle;

В вашем примере координаты x и y должны меняться в зависимости от изменения входного значения, но координаты - это объект с фиксированными значениями x и y. Я думаю, что логика тоже должна измениться.