Блог

для меня это не имеет абсолютно никакого логического смысла.

мой graph.js работал до тех пор, пока он случайно не остановился после передачи локального хранилища в качестве реквизита. я провел рефакторинг, чтобы сделать передачу prop полностью не связанной с локальным хранилищем… что все равно не должно иметь значения.

по какой-то причине каждое число, которое я ввожу в поле данных, работает, ЗА исключением случаев, когда я добавляю props.score / number или ЧТО-ЛИБО переназначает это число. я никогда не видел ничего подобного. когда я консольный номер журнала равен 82. это число (оно синее в консоли), но когда я помещаю его в chart.js он просто не появится.

что, черт возьми, происходит ?!

это похоже на ввод 2 2 в калькулятор и получение 5. я буквально понятия не имею, что сейчас пытаюсь разобраться в этом, может быть, 4 часа без абсолютно никакого ответа. еще раз…

эта ошибка произошла случайно только сегодня, до этого мое приложение работало нормально … ?!

сделал chart.js изменить что-то со вчерашнего дня? это случайная ошибка?

я никогда не сталкивался с такой проблемой после столь долгого отката. не имеет смысла.

 import {useEffect} from 'react'
import Chart from 'chart.js';
import './BreakDown.css'

const LineChart = (props) => {
  const number=props.score ***i am trying to get props.score into the chart js data point. 

  console.log(number) ****this console logs 82

  const newNumber=10 number
console.log(newNumber) ***this console logs 92

  useEffect(()=>{
    var ctx = document.getElementById('myLineChart');

    var myChart = new Chart(ctx, {
        type: 'line',
        responsive:true,
        data: {
            labels: ['X', 'IQ', 'X'],
            datasets: [{
                label: 'Your Score',
                data: [0,newNumber,0], ***no matter what i do plug in in either of these numebnrs here doesn't work. 
                backgroundColor: [
                  'rgba(54, 80, 235, 0.2)',
                  'rgba(54, 80, 235, 0.2)',
                  'rgba(54, 162, 235, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                ],
                borderWidth: 1,

            },
            {
                label: 'Average',
                data: [0, 100, 0],
                backgroundColor: [
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(54, 80, 235, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, .5)',
                    'rgba(255, 99, 132, .5)',
                    'rgba(255, 99, 132, .5)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: false,
                        suggestedMin: 70,
                    suggestedMax: 160,
                    stepSize: 10
                    }

                }]
            }
        }
    });
  },[])
  return (
    <div >
    <canvas id="myLineChart" width="650" height="400"></canvas>
</div>
  )
}

export default LineChart

 

чтобы сделать вещи ЕЩЕ более странными, если я подключу newNumber к диаграмме, в этом случае он дает мне 10, даже несмотря на консоль.регистрация newNumber дает мне 92… ДА?!

Ваш код отлично работает при первом рендеринге для меня. Я не уверен на 100% из вашего описания, что, по вашему мнению, идет не так, но 1 проблема, которую я вижу, заключается в том, что useEffect будет запускаться только один раз из [] -за второго параметра.

Если ваши prop.score обновления useEffect() не будут запускаться снова, это означает, что ваша диаграмма не будет обновляться.

Основным изменением, которое я сделал ниже, было добавление props.score в массив для useEffect, это указывает useEffect на повторный запуск при props.score изменении. Вы можете прочитать больше об этом в документах useEffect

 import React, { useEffect } from 'react'
import Chart from 'chart.js';

const LineChart = (props) => {
    const number = props.score //***i am trying to get props.score into the chart js data point. 

    console.log(number) //****this console logs 82

    const newNumber = 10   number
    console.log(newNumber) //***this console logs 92

    useEffect(() => {
        var ctx = document.getElementById('myLineChart');

        var myChart = new Chart(ctx, {
            type: 'line',
            responsive: true,
            data: {
                labels: ['X', 'IQ', 'X'],
                datasets: [{
                    label: 'Your Score',
                    data: [0, newNumber, 0],
                    backgroundColor: [
                        'rgba(54, 80, 235, 0.2)',
                        'rgba(54, 80, 235, 0.2)',
                        'rgba(54, 162, 235, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                    ],
                    borderWidth: 1,

                },
                {
                    label: 'Average',
                    data: [0, 100, 0],
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(54, 80, 235, 0.2)',
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, .5)',
                        'rgba(255, 99, 132, .5)',
                        'rgba(255, 99, 132, .5)',
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: false,
                            suggestedMin: 70,
                            suggestedMax: 160,
                            stepSize: 10
                        }

                    }]
                }
            }
        });
    }, [props.score])
    return (
        <div >
            <canvas id="myLineChart" width="650" height="400"></canvas>
        </div>
    )
}

export default LineChart