Обновление круговой диаграммы в React по мере ввода данных

#javascript #reactjs #chart.js #react-chartjs-2

Вопрос:

У меня есть страница react, которая содержит круговую диаграмму. Он возвращает этот div, а также несколько других компонентов HTML.

У меня также есть 25 полей ввода, которые обновляют 3 переменные (incomeNum, expenseNum и savingNum), когда что-то вводится в любом из полей ввода (событие onChange в react).

Функция newData выглядит следующим образом. Он успешно обновляет 3 переменные без проблем:

Предполагается, что круговая диаграмма отображает данные из переменных incomeNum, expenseNum и savingNum. Моя цель — динамически обновлять круговую диаграмму, как я, до переменных incomeNum, expenseNum и savingNum по мере заполнения полей ввода. Я думал, что когда я обновил эти три переменные, я мог бы просто обновить источник данных (используемый круговой диаграммой), и это обновило бы круговую диаграмму, но проблема в том, что диаграмма не обновляется, если вы не нажмете на нее. Я хочу, чтобы она обновлялась, не нажимая на нее.

Спасибо, что прочитали это.

1. вы когда-нибудь использовали методы жизненного цикла? а также не очень хорошо обращаться к DOM с помощью ванильных методов, попробуйте использовать ссылки или состояние

2. Я никогда не использовал методы жизненного цикла. Я действительно новичок в React, но я изучу их.

3. лучше прочитайте основы react на официальном веб-сайте, они довольно просты, из того, что я вижу, вы могли бы создать 3 или, может быть, 1 свойства состояния и обновлять их при необходимости, когда вы обновляете состояние, запускаются повторные отправители компонентов и методы жизненного цикла, поэтому представление меняется, вот что вам нужнонеобходимо

4. Что ж, похоже, мне нужно немного почитать о жизненных циклах, состояниях и рендеринге. Спасибо за ввод.

Ответ №1:

Вы не должны обновлять HTML компонента React вне React. Это означает, что вы должны либо использовать перехватчики состояний для процедурных, либо setState для объектно-ориентированных.

Так, например:

 render() {
    return (<>
       <div id="income">
              ${this.state.incomeNum}
       </div>
       <input value={this.state.incomeNum} onChange={(evt) => this.setState({incomeNum: evt.target.value})} />
    </>)

Или в процедурном:

 const [incomeNum, setIncomeNum] = useState(0);

return (
    <>
        <p>${incomeNum}</p>
        <input onChange={(evt) => setIncomeNum(evt.target.value)} value={incomeNum}>
    </>
);