使用 React Hooks 创建历史页面

Question

我正在尝试使用 react 钩子创建一个历史页面，以跟踪用户最近的搜索，他们不必仅通过此会话的刷新来保持持久性。

我的搜索组件看起来像这样这是一个简单的应用程序，不需要 UI 只需在搜索页面上进行简单导航，它将显示结果，在历史记录页面上我希望能够显示以前的搜索本期

我正在尝试跟踪 debouncedTerm，以便在新组件中显示它

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

const Search = () => {
  const history = [];
  const [term, setTerm] = useState('');
  const [debouncedTerm, setDebouncedTerm] = useState(term);
  const [results, setResults] = useState([]);

  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedTerm(term);
    }, 1000);

    return () => {
      clearTimeout(timerId);
    };
  }, [term]);

  useEffect(() => {
    const search = async () => {
      const { data } = await axios.get('http://hn.algolia.com/api/v1/search?', {
        params: {
          query: debouncedTerm,
        },
      });

      setResults(data.hits);
    };
    if (debouncedTerm) {
      search();
    }
  }, [debouncedTerm]);

  const renderedResults = results.map((result) => {
    return (
      <div key={result.objectID} className="item">
        <div className="right floated content">
          <a className="ui button" href={result.url}>
            Go
          </a>
        </div>
        <div className="content">
          <div className="header">{result.title}</div>
        </div>
      </div>
    );
  });

  return (
    <div>
      <div className="ui form">
        <div className="field">
          <label>Hacker News Search:</label>
          <input
            value={term}
            onChange={(e) => setTerm(e.target.value)}
            className="input"
          />
        </div>
      </div>
      <div className="ui celled list">{renderedResults}</div>
    </div>
  );
};

export default Search;

Answer 1

您的代码看起来正朝着正确的方向发展，但您有一个常量const history = [];，您必须记住，这不起作用，因为您将在每次渲染中重新声明一个新常量。你必须像这样使用 React setState：

const [history, setHistory] = useState([]);

您可以在React documentation 中了解更多信息。

编辑： 为了向现有历史记录添加新元素，您必须像这样附加它：

setHistory(oldHistory => [...oldHistory, newHistoryElement]);