Api奇迹响应不显示反应

Posted 2023-02-22

【中文标题】Api奇迹响应不显示反应

【英文标题】：Api marvel response don't show react

【发布时间】：2020-08-12 13:35:15

【问题描述】：

我尝试在 react 中进行训练，并希望制作一个表单，在使用当前输入提交时调用 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 个字符的搜索过滤器？

【参考方案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);
      );
  ;