Question

我正在尝试使用React / Axios从API的搜索中获取数据

        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
      )

query-必须是动态的，因此每次搜索我都必须用查询替换搜索值。这是我的第一个反应项目。

这是搜索组件：


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}语法既不突出显示也不起作用

Answer 1

您似乎在使用'（单引号）而不是`（重音符）来包装模板文字

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

应该是

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

如何在react-axios中使用动态变量？

1 个答案: