javascript - 为什么我在 useEffect() 的角度计算中得到“未定义”？

Question

从 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 行，我未定义。

所以我的错误信息说：InvalidNumber: M3.980102097228898e-15,-65LNaN,NaNZ

标签： javascriptreactjsreact-natived3.jsundefined