SparkLines ReactJS - Получено NaN - PullRequest
Новая
       30

SparkLines ReactJS - Получено NaN

0 голосов
/ 05 января 2020

Пытаясь выяснить ReactJS. А именно, это произошло в тот момент, когда SparkLines должны быть сделаны. Но почему-то не отображается значение. Что может быть не так?

JSON: 

[
    {
        "playersCount": "41170",
        "playersCountToday": "41",
        "playersCountAll": "45232",
        "countDailyChecksAll": [
            "41",
            "125",
            "68",
            "26",
            "41",
            "41",
            "66"
        ]
    }
]

Код: 

class CountMain extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            post: []
        };
    }

    componentDidMount() {
        this.fetchPost();
        this.timer = setInterval(()=> this.fetchPost(), 5000)
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }    

    async fetchPost() {
        fetch('https://example.com/json')
        .then(res => {
            return res.json();
        })
        .then(data => {
            this.setState({
                post: data
            });
        })
        .catch(err => {
            console.log(err);
        });
    }

    render() {
        const playersCount = this.state.post.length === 0 ? <span><i className="fas fa-spinner fa-spin"></i></span> : <span>{this.state.post[0].playersCount}</span>;
        const playersCountToday = this.state.post.length === 0 ? <span><i className="fas fa-spinner fa-spin"></i></span> : <span>{this.state.post[0].playersCountToday}</span>;
        const playersCountAll = this.state.post.length === 0 ? <span><i className="fas fa-spinner fa-spin"></i></span> : <span>{this.state.post[0].playersCountAll}</span>;

        const countDailyChecksAll = this.state.post.length === 0 ? 0 : this.state.post[0].countDailyChecksAll.join(',');
        //console.log(countDailyChecksAll);

        return (
            <div className="row">
                <div className="col-xl-3 col-md-6 col-sm-12">
                    <div className="box-playerCount rcc--stats">
                        <div className="box-cont">
                            <img className="unselectable" src="myimage.jpg" />
                            <h3 className="box-title">Test Column</h3>
                            <ul className="list-inline two-part">
                                <li>
                                    <Sparklines data={[{countDailyChecksAll}]} margin={6}> //this line error
                                        <SparklinesLine style={{ strokeWidth: 6, stroke: "#4c90e5", fill: "none" }} />
                                    </Sparklines>                                    
                                </li>
                                <li className="numbers text-right animated fadeInLeft">
                                    {playersCountAll}
                                </li>
                            </ul>                                
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

Ошибки:

Предупреждение: получено NaN для атрибута cy. Если это ожидается, приведите значение к строке.

Ошибка: атрибут cy: ожидаемая длина, "NaN".

act-dom.development. js: 2323 Ошибка: точки атрибута: ожидаемое число, "6 NaN".

console.log ВЫХОД:

41,125,68,26,41,41,66

Что я делаю не так?

Ответы [ 2 ]

1 голос
/ 05 января 2020

data должен быть массивом чисел. У вас есть массив строк, которые вы конвертируете в один, разделенный запятыми String, а затем вы заключаете его в массив. Это неверно. 

// convert to numbers
const countDailyChecksAll = this.state.post[0].countDailyChecksAll.map(parseFloat);

<Sparklines data={countDailyChecksAll} ... >
1 голос
/ 05 января 2020

В реакции вы должны определить свою динамическую c переменную в Sate

Состояние - это JavaScript объект, который хранит динамические данные c компонента и определяет поведение компонента. Поскольку состояние является динамическим c, оно позволяет компоненту отслеживать изменяющуюся информацию между визуализациями и быть динамическим c и интерактивным.

, например, вместо 

const countDailyChecksAll = this.state.post.length === 0 ? 0 : 
this.state.post[0].countDailyChecksAll.join(',');

используется как: 

 this.setState({countDailyChecksAll: this.state.data[i].countDailyChecksAll})

пример песочницы временного кода

...