javascript - React JS自定义组件动画

我有一个ReactJS组件，看起来像这样：

import React from 'react';

class Circle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            percent: null
        };
    }

    componentDidMount() {
        const url = "base url here" + this.props.endpoint;
        fetch(url)
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        percent: result.percent
                    });
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error: error
                    });
                }
            )
    }

    render() {
        return (
            <div className={"col-md-" + this.props.size + " progress-circles"} data-animate-on-scroll="on">
                <div className="progress-circle" data-circle-percent={"" + this.state.percent + ""} data-circle-text="">
                <h4>{this.props.title}</h4>
                    <svg className="progress-svg">
                        <circle r="80" cx="90" cy="90" fill="transparent" strokeDasharray="502.4" strokeDashoffset="0"></circle>
                        <circle className="bar" r="80" cx="90" cy="90" fill="transparent" strokeDasharray="502.4" strokeDashoffset="0"></circle>
                    </svg>
                </div>
            </div>
        );
    }
}

export default Circle;

到目前为止，这就像一个整体的魅力。唯一的问题是，有一个与此元素相关联的动画填充了进度圈，并且在我设置了componentDidMount函数的值之后，它不会发生。如果我通过上级组件的props设置了值，则会发生动画。我想念什么吗？我是React的新手，所以它可能很简单。提前致谢！

最佳答案

解决方案的问题是，无论您是否获取调用，都始终在渲染动画。

解决方案之前，我想在这里解释的几件事


  
  在componentDidMount中获取调用之前，将isLoaded设置为true
  当您获得成功/错误响应时，将isLoaded设置为false
  获得成功响应后，还应该将错误状态更改为null，以使其第二次工作
  当您收到错误响应时，还应该将百分比状态更改为null以使其第二次工作
  在isLoaded为true时显示加载程序，错误和百分比都为null
  当百分比不为null，isLoaded为false且error为null时显示成功响应
  当错误不为null，isLoaded为false并且percent为null时显示错误响应
  


这就是我通常在应用程序中所做的

import React from 'react';

class Circle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            percent: null
        };
    }

    componentDidMount() {
        const url = "base url here" + this.props.endpoint;
        this.setState({
            isLoaded: true
        });
        fetch(url)
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: false,
                        percent: result.percent,
                        error: null
                    });
                },
                (error) => {
                    this.setState({
                        isLoaded: false,
                        error: error,
                        percent: null
                    });
                }
            )
    }

    render() {
        const { isLoaded } = this.state;
        return (
            <div className={"col-md-" + this.props.size + " progress-circles"} data-animate-on-scroll="on">
                {isLoaded && percent == null && error == null && (<div className="progress-circle" data-circle-percent={"" + this.state.percent + ""} data-circle-text="">
                <h4>{this.props.title}</h4>
                    <svg className="progress-svg">
                        <circle r="80" cx="90" cy="90" fill="transparent" strokeDasharray="502.4" strokeDashoffset="0"></circle>
                        <circle className="bar" r="80" cx="90" cy="90" fill="transparent" strokeDasharray="502.4" strokeDashoffset="0"></circle>
                    </svg>
                </div>)}
                {!isLoaded && percent != null && <h2>Success response</h2>}
                {!isLoaded && error != null && <h2>error occured</h2>}
            </div>
        );
    }}

    export default Circle;

希望这能回答您的查询