javascript - 如何通过调用我的方法 en React 使我的 url 工作？

Question

我的代码中存在问题，在我的方法componentDidMount中，当我在我的方法中调用我的变量 URL 时，this.handleClick(url)它让我犹豫不决，但是当我console.log从url它创建一个有效的时，它会在我单击任何按钮时生成一个链接！

我如何让我的网址在其中工作this.handleclick()？

const { Component } = React;       // import React, { Component } from 'react';
const { Button } = ReactBootstrap; // import Button from './components/Button';

class App extends Component {
  constructor() {
    super();

    this.state = {
      name: '',
      capital: "",
      flag: "",
      population: 0,
    }
  }

  handleClick = (country) => {
    fetch(country)
      .then(res => res.json())
      .then(json =>
        this.setState({
          name: json[0].name,
          capital: json[0].capital,
          flag: json[0].flag,
          population: json[0].population,
          region: json[0].region,
        })
      );

    console.log(this.state)
    console.log(country)
  }

  componentDidMount(click) {
    const url = `https://restcountries.eu/rest/v2/name/${click}`;

    this.handleClick()// here i have to call

    console.log(url)
  }

  render() {
    return (
      <div className="App">

        <p> name= {this.state.name}</p>
        <p> capital= {this.state.capital}</p>
        <p> flag= {this.state.flag}</p>
        <p> population= {this.state.population}</p>
        <p> region= {this.state.region}</p>
        <Button onClick={this.componentDidMount.bind(this, 'france')}>France</Button>
        <Button onClick={this.componentDidMount.bind(this, 'brazil')}>Brazil</Button>
        <Button onClick={this.componentDidMount.bind(this, 'croatia')}>Croatia</Button>

      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app")); // export default App;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap@1/dist/react-bootstrap.min.js"></script>
<div id="app"></div>

标签： javascriptreactjs

Answer 1

直接打电话就handleClick行了。

componentDidMount 是一个反应生命周期，不要将它绑定到点击事件！

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script>
import React, { Component } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from './components/Button';


class App extends Component {

  constructor() {
    super();

    this.state = {
      name: '',
      capital: "",
      flag: "",
      population: 0,

    }
  }

  handleClick = (click) => {

    const url = `https://restcountries.eu/rest/v2/name/${click}`;


    fetch(url)
      .then(res => res.json())
      .then(json =>

        this.setState({
          name: json[0].name,
          capital: json[0].capital,
          flag: json[0].flag,
          population: json[0].population,
          region: json[0].region,
        })

      );

    console.log(this.state)
    console.log(country)


  }


  render() {
    return (
      <div className="App">

        <p> name= {this.state.name}</p>
        <p> capital= {this.state.capital}</p>
        <p> flag= {this.state.flag}</p>
        <p> population= {this.state.population}</p>
        <p> region= {this.state.region}</p>
        <Button onClick={this. handleClick.bind(this, 'france')}>France</Button>
        <Button onClick={this. handleClick.bind(this, 'brazil')}>Brazil</Button>
        <Button onClick={this. handleClick.bind(this, 'croatia')}>Croatia</Button>

      </div>
    );
  }
}

export default App;