反应未定义错误的水平时间线距离答案

【问题标题】：React Horizontal Timeline distance of undefined error反应未定义错误的水平时间线距离
【发布时间】：2017-09-13 01:41:35
【问题描述】：

我正在尝试在我的 react 应用程序中使用 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;

有人可以找出真正的问题，或者建议一些好的水平时间线选项吗？

【问题讨论】：

标签： javascript node.js reactjs react-native timeline

【解决方案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>
        }
    }

【讨论】：

我实际上是在我的真实代码中的 body div 中返回它，我忘记在此处添加 sn-p，现在已编辑。我也转换了日期格式，但没有任何效果，仍然出现同样的错误。
但是您从问题中删除了值，您是否在代码中使用它？？
抱歉没听明白，你说的是哪些价值观？
是的，问题中讨论的错误已通过这些更改得到解决。但我无法按照that github issue 中的讨论成功制定时间表。

【解决方案2】：

问题中发布的 sn-p 有两个主要问题。

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

See similar github issue

【讨论】：