Api奇迹响应不显示反应答案

【问题标题】：Api marvel response don't show reactApi奇迹响应不显示反应
【发布时间】：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 个字符的搜索过滤器？

【问题讨论】：

标签： reactjs forms api react-hooks

【解决方案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);
      });
  };

【讨论】：