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 函数设置值后它不会发生。如果我通过父组件的道具设置值，动画确实会发生。我错过了什么吗？我是 React 的新手，所以它可能很简单。提前致谢！

Answer 1

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

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

1. 在 componentDidMount 中的 fetch 调用之前将 isLoaded 设置为 true
2. 当您获得成功/错误响应时，将 isLoaded 设置为 false
3. 当您获得成功响应时，您还应该将错误状态更改为 null 以使其第二次工作
4. 当您收到错误响应时，您还应该将百分比状态更改为 null 以使其第二次工作
5. 当 isLoaded 为 true、error 和 percent 均为 null 时显示加载器
6. 当百分比不为空、isLoaded 为假且错误为空时显示成功响应
7. 当 error 不为 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;

希望这能回答您的问题