Как использовать переменную Dynami c в react-ax ios? - PullRequest
Новая
       6

Как использовать переменную Dynami c в react-ax ios?

1 голос
/ 13 июля 2020

Я пытаюсь получить данные на основе поиска из API, с помощью React / Ax ios

        process.env.REACT_APP_MARVEL_API_BASE_URL +
          'characters?nameStartWith=${query}orderBy=name' +
          '&ts=' +
          ts +
          '&apikey=' +
          process.env.REACT_APP_MARVEL_API_PUBLIC_KEY +
          '&hash=' +
          hash
      )

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

Это компонент поиска: 


const Search = ({ getQuery }) => {
  const [text, setText] = useState('')

  const onChange = (q) => {
    setText(q)
    getQuery(q)
  }

  return (
    <section className="search">
      <form>
        <input
          type="text"
          className="form-control"
          placeholder="Search e.g. Ironman, Stan Lee"
          value={text}
          onChange={(e) => onChange(e.target.value)}
          autoFocus
        ></input>
      </form>
    </section>
  )
}

export default Search

это главное приложение: 

import axios from 'axios'
import Header from './components/ui/Header'
import CharacterGrid from './components/characters/CharacterGrid'
import Search from './components/ui/Search'
import crypto from 'crypto'
import './App.css'

const ts = new Date().getTime
const hash = crypto
  .createHash('md5')
  .update(
    ts +
      process.env.REACT_APP_MARVEL_PRIVATE_KEY +
      process.env.REACT_APP_MARVEL_API_PUBLIC_KEY
  )
  .digest('hex')

const App = () => {
  const [items, setItems] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [query, setQuery] = useState('')

  useEffect(() => {
    const fetchItems = async () => {
      setIsLoading(true)
      const result = await axios(
        process.env.REACT_APP_MARVEL_API_BASE_URL +
          'characters?nameStartWith=${query}orderBy=name' +
          '&ts=' +
          ts +
          '&apikey=' +
          process.env.REACT_APP_MARVEL_API_PUBLIC_KEY +
          '&hash=' +
          hash
      )

      setItems(result.data)
      setIsLoading(false)
    }
    fetchItems()
  }, [query])

  return (
    <div className="container">
      <Header />
      <Search getQuery={(q) => setQuery(q)} />
      <CharacterGrid isLoading={isLoading} items={items} />
    </div>
  )
  //TODO pagination
}

export default App

но поиск не работает, $ { query} синтаксис не выделяется и не работает

1 Ответ

0 голосов
/ 13 июля 2020

Похоже, вы используете '(одинарная кавычка) вместо `(серьезный акцент), чтобы обернуть ваши литералы шаблона 

'characters?nameStartWith=${query}orderBy=name'

должно быть 

`characters?nameStartWith=${query}orderBy=name`
...