Api Marvel не реагирует

Question

Я пытаюсь научиться реагировать и хочу создать форму, которая вызывает api marvel при отправке с текущим вводом и отображает имя + описание поиска символа.

Вызов Api в порядке, но когда я отправляю форму ничего не показать совет?

    import React, { Component, useEffect, useState } from 'react'
    import axios from 'axios'





const SearchEngine = React.forwardRef((props, ref) => {

  const [asked, setAsked] = useState([]);
  const [characterInfos, setCharacterInfos] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [loading, setLoading] = useState(true);
  const [inputs, setInputs] = useState('');


  const handleChange = (event) => {
    setInputs(event.target.value);
    console.log(inputs);
  }


  const getCharacters = (inputs) => {

      setSearchTerm(inputs)
      axios
        .get(`https://gateway.marvel.com:443/v1/public/characters?name=${searchTerm}&apikey=XXX`)
        .then(response => {
          console.log(searchTerm)
          console.log(response)
          setCharacterInfos(response.data.data.results[0]);
          setLoading(false);
          console.log(response.data.data.results[0].name)
          response.data.data.results.map((item) => {
            return characterInfos.push(item.name)
          })

          localStorage.setItem(characterInfos, JSON.stringify(response.data))
          if (!localStorage.getItem('marvelStorageDate')) {
            localStorage.setItem('marvelStorageDate', Date.now());
          }
        })
        .catch(error => {
          console.log(error);
        })
  }



  return (
    <div className="search-container">
      <h1>Character Infos</h1>
      <form onSubmit={getCharacters}>
        <input
          type="text"
          placeholder="Search"
          value={inputs}
          onChange={handleChange}
        />
        <input type="submit" value="Envoyer" />
      </form>
      <ul>
        <li>{characterInfos.name}</li>
      </ul>
    </div>
  )
})


export default React.memo(SearchEngine)

Спасибо за вашу помощь. Любой совет, чтобы показать список всех символов и сделать фильтр поиска, который работает минимум с 3 символами?

Answer 1

getCharacters запускается с событием отправки формы в качестве параметра. Вы предполагаете, что неправильно получаете inputs из состояния:

  const getCharacters = event => {
    event.preventDefault() // Prevent browser making undesired form native requests
    // setSearchTerm(inputs); // Not sure what are you trying here but, again, inputs is a form submit event
    axios
      .get( // use searchValue as query string in the url
        `https://gateway.marvel.com:443/v1/public/characters?name=${searchValue}&apikey=XXX`
      )
      .then(response => {
        console.log(searchTerm);
        console.log(response);
        setCharacterInfos(response.data.data.results[0]);
        setLoading(false);
        console.log(response.data.data.results[0].name);
        response.data.data.results.map(item => {
          return characterInfos.push(item.name);
        });

        localStorage.setItem(characterInfos, JSON.stringify(response.data));
        if (!localStorage.getItem("marvelStorageDate")) {
          localStorage.setItem("marvelStorageDate", Date.now());
        }
      })
      .catch(error => {
        console.log(error);
      });
  };