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

Проблема с вашим решением заключается в том, что вы воспроизводите анимацию всегда, независимо от того, делаете ли вы вызов или нет.

Несколько вещей, которые я хотел бы объяснить здесь до решения

1. Make isLoaded в true перед вызовом выборки в componentDidMount
2. Когда вы получаете ответ об успешном / ошибочном обращении, установите isLoaded в false
3. Когда вы получите ответ об успешном завершении, вам также следует изменить состояние ошибки на ноль, чтобы сделатьэто работает второй раз
4. Когда вы получаете ответ об ошибке, вы должны также изменить свой процентный статус на ноль, чтобы заставить его работать второй раз
5. Показывать загрузчик, когда isLoaded имеет значение true, ошибка и процент оба равны null
6. Показать ответ об успешном выполнении, если процент не равен нулю, isLoaded false и ошибка равна нулю
7. Показать ответ об ошибке, если ошибка не равна нулю, isLoaded false и процент равен нулю

Это то, как я обычно делаю в моем приложении

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;

Надеюсь, что это отвечает на ваш запрос