Почему я получаю «неопределенный» в этом вычислении угла в useEffect ()?

#javascript #reactjs #react-native #d3.js #undefined

#javascript #reactjs #react-native #d3.js #неопределенный

Вопрос:

Я получаю значение при выборке из API, но вычисленный угол по-прежнему отображается как неопределенный — почему это?

  • cleanValue — это функция, которая будет Math.floor значением и toFixed(1)
  • newValue показывает правильное число, т.Е. 1, 2, 3, 4, 5 и т.д. … (0-10), в данном случае 4
     const {newValue} = cleanValue(value);
    console.log(newValue); // value will be anywhere from 0 to 10
    const [displayValue, setDisplayValue] = useState(0);
    const endAngle = useAnimation(newValue, animate); // animate = true
    useEffect(() => {
        endAngle.addListener(v => {
            setDisplayValue(cleanValue((v.value * 10) / Math.PI).displayValue);
        });
        return function cleanup() {
            endAngle.removeAllListeners();
        };
    }, [endAngle]);
    console.log('endAngle after useEffect:', endAngle);
 

Он используется здесь:

 import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Path} from 'react-native-svg';
import * as shape from 'd3-shape';
const d3 = {shape};

export default class Arc extends PureComponent {
    static propTypes = {
        innerRadius: PropTypes.number,
        outerRadius: PropTypes.number,
        endAngle: PropTypes.number,
    };
    constructor(props) {
        super(props);
        const {innerRadius, outerRadius} = props;
        this.generator = d3.shape
            .arc()
            .outerRadius(outerRadius)
            .padAngle(0)
            .startAngle(0)
            .innerRadius(innerRadius);
    }

    render() {
        const {endAngle} = this.props;
        {
            console.log(
                'endAngle when generating animation:',
                endAngle,
                'd: ',
                this.generator.endAngle(endAngle)(),
            );
        }
        return <Path d={this.generator.endAngle(endAngle)()} />;
    }
}
 

Полный вход в консоль: https://pastebin.com/zyHPvFhn в строке 9 я получаю undefined.

Итак, в моем сообщении об ошибке говорится: InvalidNumber: M3.980102097228898e-15,-65LNaN,NaNZ

Комментарии:

1. Если вы console.log endAngle , меняет ли это значение?

2. @Magofoco да, я обновил свой вопрос, включив скриншот

3. Так это displayValue то, что есть undefined ?

4. Нет, значение displayValue не определено.

5. toFixed возвращает строку, а не число, так что это может привести к сбиванию ваших вычислений