Javascript 如何获取通过搜索传递的前 5 个值，然后在 API 中使用它.我想显示以前的五个值

发布于06月27日

这是一个功能组件.在这里，我使用useEffect钩子来实现API对搜索的依赖性.我正在做控制台的地方.log(${search})正在控制台中显示当前搜索.如何在数组中获取最后五个搜索，然后显示它们？

    const [city, setCity] = useState(null);
    const [search, setSearch] = useState("Dehradun");


useEffect ( () => {
        const fetchApi = async () => {
            const url = `https://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=7938d9005e68d8b258a109c716436c91`
            const response = await fetch(url);
            fetch("https://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=7938d9005e68d8b258a109c716436c91")
            .then(result => console.log(`${search}`, result))
            const resJson = await response.json();
            setCity(resJson.main);
        };
        fetchApi();

    },[search] )```

推荐答案

下面的代码能够像您所期望的那样跟踪以前的搜索.它只是将之前对数组的响应与结果一起堆叠，并在大小超过5时从末尾排除项目.

function App() {
  const [search, setSearch] = React.useState("Dehradun");
  const [searchHistory, setSearchHistory] = React.useState([]);

  const doSearch = () => {
    if (search.length > 0) {
      fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=7938d9005e68d8b258a109c716436c91`
      )
        .then((res) => res.json())
        .then((result) => {
          setSearchHistory((prevState) => [
            [search, result],
            ...prevState.slice(0, 4)
          ]);
          setSearch("");
        });
    }
  };

  return (
    <div>
      <input onChange={(e) => setSearch(e.target.value)} value={search} />
      <button onClick={doSearch}>search</button>
      {searchHistory.map(([search, result], index) => (
        <div key={index}>
          <b>{search}</b> : {JSON.stringify(result)}
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>