javascript - React JS 自定义组件动画

Question

我有一个看起来像这样的 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 函数设置值后它不会发生。如果我通过父组件的 Prop 设置值，动画会发生。我错过了什么吗？我是 React 的新手，所以它可能很简单。提前致谢!

Answer 1

您的解决方案的问题在于，无论您是否进行提取调用，您总是在渲染动画。

在解决之前我想在这里解释几件事

1. Make isLoaded to true before fetch call in componentDidMount
2. When you get success/error response turn isLoaded to false
3. When you get success response you should also change your error state to null to make it work second time
4. When you get error response you should also change your percent state to null to make it work second time
5. Show loader when isLoaded is true, error and percent both null
6. Show success response when percent is not null, isLoaded false and error is null
7. Show error response when error is not null, isLoaded false and percent is 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;

希望这能回答您的问题