SparkLines ReactJS -接收NaN

Question

试图找出ReactJS。也就是说，到了应该做SparkLines的时刻。但由于某种原因没有显示值。有什么不对的？

杰森：

[
    {
        "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“。

.NaN:2323错误:属性点:期望值，"6 NaN“。

console.log输出：

41 125 68 26 41 41 66

我做错了什么？

Answer 1

在react中，应该在Sate中定义动态变量。

State是一个JavaScript对象，它存储组件的动态数据并确定组件的行为。因为状态是动态的，它使组件能够跟踪呈现之间的更改信息，并使其具有动态和交互性。

例如，而不是

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

使用，例如：

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

临时代码沙箱示例

Answer 2

data应该是一个数字数组。您有一个字符串数组，您要将其转换为一个以逗号分隔的String，然后将其包装到一个数组中。那是不正确的。

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

<Sparklines data={countDailyChecksAll} ... >