Question

我正在尝试在我的反应应用中使用React Horizontal Timeline，但我收到了这个错误（指向react-horizontal-timeline.js的第379行）：

Uncaught TypeError: Cannot read property 'distance' of undefined

我的代码包括：

import React, { Component } from 'react';
import HorizontalTimeline from 'react-horizontal-timeline';

class Foo extends Component {
    state = {
        value : '01-01-1990',
        previous: 0
    };
    render(){
        const VALUES = ['20-04-1991'];
        return(){
            <div>
                <HorizontalTimeline values={VALUES} 
                    indexClick={(index) => {
                        this.setState({value: index, previous: this.state.value});
                    }} 
                />
                <div> {this.state.value} </div>
            </div>
        }
    }
}
export default Foo;

有人可以确定真正的问题，或者为水平时间表提出一些好的选择吗？

Answer 1

<强>更改：

1。您要从render方法返回2个元素，您需要将它们包装在div中。

请查看此answer以获取更多说明。

2。根据您附加的link，值需要array个'mm/dd/yyyy'格式的日期，但您正在传递'dd/mm/yyyy'：

const VALUES = ['20-04-1991'];

将其转换为正确的格式：

const VALUES = ['04/20/1991'];

试试这个：

render(){
        const VALUES = ['04/20/1991'];
        return(){
           <div>
               <HorizontalTimeline 
                  values={VALUES} 
                  indexClick={(index) => {
                      this.setState({value: index, previous: this.state.value});
                  }} 
               />
               <div className='text-center'>
                  {this.state.value}
               </div>
            </div>
        }
    }

Answer 2

问题中发布的代码段中有两个主要问题。

错误的日期格式：根据the simple and limited documentation，所需格式为mm/dd/yyyy。 Pointed out by @Mayank
index声明：在使用index={this.state.value}之前需要首先定义索引

See similar github issue

反应未定义错误的水平时间轴距离

2 个答案: