У меня есть простое приложение, состоящее из двух компонентов - родительского приложения и дочернего круга. Моя цель - нарисовать круг на холсте (это делает компонент Circle) и иметь ввод, который принимает числовое значение и составляет угол этого числового значения с радиусом. вот так: пример
Проблема в том, что я установил прослушиватель событий onChange с обработчиком на вводе, который должен обновлять мое состояние, но всякий раз, когда я ввожу что-то в поле ввода, он сообщает мне, что мой холст равен нулю, и метод .getContext ("2d") не может быть выполнен, что приводит к сбоям в работе всего приложения. Я погуглил и выяснил, что это связано с тем, что холст отображает после обновления состояния или что-то в этом роде. Я не могу придумать никакого решения, которое сделало бы это возможным. вот мой код:
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;
Фактическая ошибка:
TypeError: невозможно прочитать свойство getContext со значением null
