如何在 React 中使用箭头函数

Question

我正在处理一个节点和反应项目，当我尝试使用箭头 function 时，它会带来 function 未定义的错误。 我已经尝试按照我可以获得的每个教程进行操作，但我无法解决这个问题。 这是我的代码；

import React from 'react';
import './App.css';
import {BrowserRouter as Router, Link} from 'react-router-dom';


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state={apiResponse:""}
  }

  callAPI(){
    fetch("http://localhost:9000/testAPI")
    .then(res=> res.text())
    .then(res=> this.setState({apiResponse: res}));
  }

  componentWillMount(){
    this.callAPI();
  }

  Trial = ()=>{
    return(
      <div>this is my div</div>
    );
  }

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      <Trial />

    </div>
  );
}
}

export default App;

我得到的错误信息是：

./src/App.js
  Line 33:8:  'Trial' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed

任何帮助将不胜感激

Answer 1

而不是<Trial />您需要按照您的定义调用 function， Trial不是一个组件。

尝试如下：

<div className="App">
   <p>{this.state.apiResponse}</p>

   { this.Trial() }
</div>

Answer 2

你应该给出上下文this调用你的 function。 试试这个片段

import React from "react";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { apiResponse: "" };
  }

  Trial = () => {
    return <div>this is my div</div>;
  };

  render() {
    return (
      <div className="App">
        <p> coucou </p>
        <this.Trial />
      </div>
    );
  }
}

export default App;

Answer 3

如果你想创建一个新组件，如果你把它移到 class 之前，你的代码会更清晰。

此外，调用 api 的标准位置是 componentDidMount。 所以 react 会非常快地渲染带有空数据的页面，然后它会调用异步函数。

import React from 'react';
import './App.css';
import {BrowserRouter as Router, Link} from 'react-router-dom';


const Trial = ()=>{
    return(
      <div>this is my div</div>
    );
  }

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state={apiResponse:""}
  }

  callAPI(){
    fetch("http://localhost:9000/testAPI")
    .then(res=> res.text())
    .then(res=> this.setState({apiResponse: res}));
  }

  componentDidMount(){
    this.callAPI();
  }

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      <Trial />

    </div>
  );
}
}

export default App;

这是一个例子： https://codesandbox.io/s/hopeful-hellman-g4tc3

Answer 4

编写Trial组件的更好方法是在同一文件或其他文件中的 class 之外，这取决于reusability 。

//outside class in  different file

export function Trial(){
    return(
      <div>this is my div</div>
    );
  }

//outside class in a same  file



function Trial(){
        return(
          <div>this is my div</div>
        );
      }

如果你不想这样做，

你应该写{this.Trail()}而不是<Trial/>因为Trial是 class 实例方法而不是组件。

Answer 5

当我浏览了您的代码时，您可以通过正确调用它来访问您的箭头 function，您只需更改以下代码。

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      <this.Trial />

    </div>
  );
}

或更好的方式来访问这个

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      {this.trial()}

    </div>
  );
}

Answer 6

您可以在您的 jsx 中将其称为 function

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      { this.trial() }

    </div>
  );
}

但我建议不要这样做。 相反，让它成为一个功能组件。 您可以在与此文件相同的文件中或在单独的专用页面上创建它。

所以你的整个代码应该是这样的

import React from 'react';
import './App.css';
import {BrowserRouter as Router, Link} from 'react-router-dom';


const Trial = ()=> ( <div>this is my div</div>)

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state={apiResponse:""}
  }

  callAPI(){
    fetch("http://localhost:9000/testAPI")
    .then(res=> res.text())
    .then(res=> this.setState({apiResponse: res}));
  }

  componentWillMount(){
    this.callAPI();
  }

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      <Trial />

    </div>
  );
}
}

export default App;

希望这可以帮助