组件以未定义的形式返回

Question

我正在

  

./ src / App.js第37行：'输出'未定义react / jsx-no-undef

但我看不出自己的错误。我已经从我看到的内容正确导入了输出，我也正确导出，我没有看到jsx语法中的任何错误，或者一般的语法的其余部分。

App.js

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import Ouput from './Components/Output';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      paras: 4,
      html: true,
      text: ""
    };
  }
  componentWillMount() {
    this.getSampleText();
  }

  getSampleText() {
    axios
      .get(
        "http://hipsterjesus.com/api?paras=" +
          this.state.paras +
          "&html=" +
          this.state.html)
      .then(response => {

        this.setState({ text: response.data.text }, function() {
          console.log(this.state);
        });
      })
      .catch(error => {console.log(error);
  });
}
      render() {
    return ( <div className="App">
      <Output value={this.state.text} />
    </div>
      );
   }
}

export default App;

Output.js

import React, { Component } from 'react';


class Output extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: props.value

    }
  }

  render() {
    return (<div className="output">
            {this.props.value}
           </div>
    )
  }
}
export default Output