2017-11-02 3 views
1

Ich arbeite an einem Proof of Concept, um einige einfache JSON-Daten vom JSON-Server zu holen, um sie in meiner React-App anzuzeigen. Dabei versuche ich fetch aufzurufen, um die Daten direkt zu laden. Wenn ich das tue.Typoskriptfehler: block-scoped Variable 'fetch' kann nicht redeclariert werden

ERROR: "cannot redeclare block-scoped variable 'fetch'.

Meine Frage ist, wenn in regelmäßigen Typoskript arbeiten, wie kann ich um dieses Problem zu bekommen?

import React, { Component } from 'react'; 
import '../HeaderBar/HeaderBar.css'; 

type StatusBarProps = {}; 
type StatusBarState = { 
    launch_timer: boolean; 
    foreGroundTimer: number; 

}; 
class StatusBar extends Component<StatusBarProps, StatusBarState> { 
    timerId: number; 
    constructor() { 
     super(); 
     this.state = { 
      launch_timer: true, 
      foreGroundTimer: -1, 
     }; 
    } 
    componentDidMount() { 
     window.fetch('localhost:3000/StatusComponent').then(results => { 
      return results.json(); 
     }).then(data => { 
      let systemOff = 'green'; 
      let systemOn = 'gray'; 
      let statusBarBlocks = data.StatusComponent.map((Status) => { 
       return(
        <div className="blockBar" id={Status.id} key={Status.key} style={{ backgroundColor: (this.state.foreGroundTimer >= Status.id) ? systemOff : systemOn }}> {Status.Name} </div> 
       ); 
      }); 
      this.setState({statusBarBlocks: statusBarBlocks}); 
     }); 
    } 
    componentWillUnmount() { 
     clearInterval(this.timerId); 
    } 
    tick() { 
     this.setState({ launch_timer: !this.state.launch_timer, foreGroundTimer: (this.state.foreGroundTimer + 1) % 26 }); 
    } 
    render() { 

     return (
      <div className="location"> 
       <div className="col-xs-6"> 
       {this.state.statusBarBlocks} 
       </div> 
      </div> 
     ); 
    } 
} 
export default StatusBar; 

bearbeiten 1: Die Lage des Problems ist @ Typen/WHATWG-Fetch/index.d.ts was dazu führt mich zu glauben, dass dies ein Problem mit Typoskript. Ich habe Isomorphic-fetch umsonst implementiert.

+0

Importieren Sie fetch aus isomorphic-fetch-Paket? –

+0

@SlawaEremkin Ich nicht, aber würde das Problem verursachen? – jpearsonNode

+0

Welcher Teil des Codes verursacht das Problem? Versuchen Sie, alles andere zu entfernen – Bergi

Antwort

0

Also in der Arbeit, um die Ursache dieses Problems zu entdecken. Ich fand, dass ich eine Überlappung hatte, wo Fetch sowohl in der Lib-Datei als auch in @ types/whatwg-fetch deklariert wurde. Durch das Deinstallieren dieser Abhängigkeit konnte das Programm kompiliert werden. Das Problem lösen.

whatwg-fetch new typescript 2.5.3

an dieser SO Post gefunden. Dank an Fenton für diese Antwort.

Verwandte Themen