Передайте параметр в React Url, чтобы получить относительные данные

Question

Я создал express API, где, когда мы передаем параметр в URL, скажем localhost: 8000 / data? Music = rock, он дает мне данные, связанные с ним, и если я передаю, скажем localhost: 8000 / data? Music = rap и дает мне данные, связанные с ним .... PS Есть много жанров музыки c классического и т. д. и данных, связанных с ним.

Express API :: подключен к пн goose где я удалил данные и сохранил их в mongodb, откуда они извлекают данные

app.get('/data'.(res,req)=>{
    count music = req.query.music
    collection.find({"music":music},(err,result)=>{
        if(err):
            return res.status(500).send(err);
        }
        else{
            console.log(docs);
            res.send(docs);
        }
    });
});

React JS :: ::

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {apiResponse:"",genre:""};
  }
  async callAPI(e) {
    console.log(e.target.value);
    const url = `http://localhost:8000/data?music=${e.target.value}`;
    const response = await fetch(url);
    console.log(response);
    const textResponse = response.text();
    console.log(textResponse);
    this.setState({apiResponse:textResponse});
  }

  render() {
    const {apiResponse} = this.state;
    console.log(apiResponse);

    return (
      <>
        <select name="continent" id="continent" onClick={e=>this.callAPI(e)}>
          <option value=" ">--Please choose an option--</option>
          <option value="Europe">Europe</option>
          <option value="North America">North America</option>
        </select>
        {apiResponse && <h1>{apiResponse.title}</h1>}
      </>
    );
  }
}

export default App;

Теперь я подключил express api к реагированию, но, как вы можете видеть, я указал путь * stati c как

fetch("http://localhost:8000/data?music=Rock")

, чтобы получить данные, связанные с рок-музыкой c.

* 1017. * Но я хочу реагировать, чтобы динамически получать разные жанры музыки c из API без использования пути c для получения данных. как реагировать порт :: localhost: 3000 / музыка = рок, и это дает мне данные рок-музыки c или классической, и это дает мне данные этого.

Может ли кто-нибудь из сообщества подсказать мне, какой метод можно использовать или какую-либо статью? Буду очень признателен. Ура !!

Answer 1

Вы можете использовать элемент select для запуска события onChange для получения data от пользователя. Здесь я заменил url на template literals. После завершения fetch и установки apiResponse вы можете map данные в блоке return.

Вот рабочая песочница .

import React from "react";

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

  async callAPI(e) {
  console.log(e.target.value);
  const url = `http://localhost:8000/data?music=${e.target.value}`;
  const response = await fetch(url);
  console.log(response);
  const textResponse = response.text();
  console.log(textResponse);
  this.setState({ apiResponse: textResponse });
}


  render() {
    return (
      <>
        <select name="genre" id="genre" onChange={e => this.callAPI(e)}>
          <option value="">--Please choose an option--</option>
          <option value="Rap">Rap</option>
          <option value="Rock">Rock</option>
        </select>
      </>
    );
  }
}

export default App;

Answer 2

Вы можете добавить контролируемое поле ввода для музыки c и использовать this.state.music в URL-адресе для извлечения

https://reactjs.org/docs/forms.html#controlled -компоненты

Answer 3

Вы можете использовать ось для запроса и установить параметры, в данном случае, musi c

axios.get('http://localhost:8000/data', {
    params: {
      music: 'rap'
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });  

Подробнее об оси можно прочитать здесь