如何通過調用我的方法 en React 來使我的 url 工作？

Question

我的代碼中有問題，在我的方法componentDidMount ，當我在this.handleClick(url)調用我的變量 URL 時，它讓我猶豫不決，但是當我從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>

Answer 1

直接調用handleClick即可。

componentDidMount 是一個 react生命周期，不要綁定到點擊事件上！

 <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;

Answer 2

componentDidMount生命周期方法不接受任何參數，去掉click參數，調用你的handleClick方法普通