Api奇迹反应未显示反应

Question

我尝试进行反应方面的培训，并希望创建一个表单，以便在使用当前输入提交时调用api奇迹，并显示名称和字符搜索的描述。

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);
      });
  };