Как заставить мой URL работать, вызывая мой метод en React?

ProgramBox

Как заставить мой URL работать, вызывая мой метод en React?

Post author:admin
Запись опубликована:8 марта, 2023
Post category:Вопросы по программированию

#javascript #reactjs

Вопрос:

У меня проблема в моем коде, в моем методе componentDidMount , когда я вызываю свою переменную URL в my this.handleClick(url) , это вызывает у меня нерешительность, но когда я создаю console.log из url него, он работает, он генерирует ссылку, когда я нажимаю любую из моих кнопок!

Как мне заставить мой 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>

1. * Я нажимаю на свою кнопку!

2. почему вы привязываете componentDidMount к click ??

3. так что, когда я нажимаю на кнопку, это генерирует мне ссылку на страну, это делается для того, чтобы я не делал запрос на chays country

Ответ №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;

1. спасибо, но почему вы удалили componentDidMount ? (Я должен использовать метод для своего упражнения)

2. потому что после того, как вы использовали обработчик onClick, в прикрепленном коде в нем не было необходимости

3. ха, хорошо, я понял; Я протестировал код, но он не дает мне именно то, что я хочу, он дает мне, когда я нажимаю на Францию, он дает мне объект в Бразилии, а когда я нажимаю на Бразилию, он дает мне объект на круазти и т.д…

4. @sakura Если вы хотите, чтобы компонент загружал данные при монтировании, вам придется снова добавить componentDidMount метод, который затем можно вызвать handleClick . Однако, поскольку пользователь еще не нажал ни на одну кнопку, вам придется указать значение по умолчанию. Например: componentDidMount() { handleClick("usa"); } Это позволит загрузить данные по США до того, как пользователь нажмет какую-либо кнопку.

Ответ №2:

componentDidMount метод жизненного цикла не принимает никаких параметров, удалите click параметр и вызовите свой handleClick метод обычным способом