Блог

Главная - Вопросы по программированию - Как сделать этот динамический URL-запрос к API?

Как сделать этот динамический URL-запрос к API?

#reactjs #api #url #axios #request

Вопрос:

Я пытаюсь вызвать API, и его URL-адрес должен измениться в соответствии с тем, что пользователь хочет искать. Это API СУПЕРГЕРОЯ, и когда пользователь ищет супергероя, URL-адрес, на который страница отправляет запрос, необходимо изменить. Я работаю с Axios в React. Итак, вот что я пытаюсь сделать.

 function App() {
const [hero, setHero] = useState("");

useEffect(() => {
axios.get(`https://cors-anywhere.herokuapp.com/https://superheroapi.com/api/apikey/search/${hero}`)
.then((response)=>{
    console.log(response.data)
  }).catch((error)=>{
    alert("not found")
  })
}, [hero])

 return (
    <div className="App">
       <div className="input-container">
         <input id="heroName" type="text" placeholder="search hero"/>
         <button type="submit" onClick={setHero(document.getElementById("heroName").innerText)}>search</button>
       </div>
      </div>
)}

export default App;

ошибка, которую я получаю, — ошибка типа: Не удается прочитать свойства null (чтение «внутреннего текста»). Это та часть кода, в которой я на самом деле не знаю, что я делаю, лол. Мои извинения, я полный нуб.

Комментарии:

1. В приложении React вы не должны очищать DOM для получения данных. (В любом случае , этого не было innerText бы-это было бы так value .) Значение вашего ввода должно быть в состоянии, и вы должны ссылаться на это. На данный момент у меня нет более полного решения, но я бы начал с этого.

Ответ №1:

Это выглядит как хороший вариант «использования» для useRef:

 import { useRef } from 'react'

function App() => {

const textInput = useRef(null)

function handleSubmit() {
// do stuff with the input here, where the ref value is {ref}.current.value...
const hero = textInput.current.value
axios.get(`https://cors-anywhere.herokuapp.com/https://superheroapi.com/api/apikey/search/${hero}`)
.then((response)=>{
    console.log(response.data)
  }).catch((error)=>{
    alert("not found")
  })
}

return (
    <div>
      <input
        type="text"
        ref={textInput} />
      <input
        type="button"
        value="Type the hero name hero"
        onClick={handleSubmit}
      />
    </div>);
)}

https://reactjs.org/docs/refs-and-the-dom.html

Метки: