获取数据然后将其保存到 ReactJS 中的状态

Question

我有一个反应应用程序，我从 coingecko API 获取数据。 我能够使用 .map 显示所有数据，并且能够根据用户在搜索栏中输入的内容过滤加密货币。 有了这个：

function FetchCrypto() {
  const [coins, setCoins] = useState([]);
  const [search, setSearch] = useState('');

  useEffect(() => {
    axios
      .get(
        'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false'
      )
      .then(res => {
        setCoins(res.data);
        console.log(res.data);
      })
      .catch(error => console.log(error));
  }, []); // this basically just fetches the data and stores it in Coins state

  const handleChange = e => {
    setSearch(e.target.value);
  }; // update search state to filter for coins (based on what user typed into searchbar)

  const filteredCoins = coins.filter(coin =>
    coin.name.toLowerCase().includes(search.toLowerCase())
  ); // this is to filter the array of data, and display "bitcoin" if user types in "bitcoin" instead of displaying the entire database

  return (
    <div className='coin-app'>
      <div className='coin-search'>
        <h1 className='coin-text'>Search a currency</h1>
        <br></br>
        <form>
          <input
            className='coin-input'
            type='text'
            onChange={handleChange}
            placeholder='Search'
          />
        </form>
      </div>
      {filteredCoins.map(coin => {
        return (
          <Coin
            key={coin.id}
            name={coin.name}
            price={coin.current_price}
            symbol={coin.symbol}
            image={coin.image}
            priceChange={coin.price_change_percentage_24h}
          />
        );
      })}
    </div>
  );
}

export default FetchCrypto;

但是，不是映射整个数据库并显示它。 我想让用户能够选择一些条目（密码）并保存它，这样他们就不必遍历所有内容来查看他们感兴趣的内容。

我正在考虑 .push() 将来自 filtersCoins 的数据放入一个数组中，然后使用 LocalStorage 来保持状态。 不太确定如何处理。

这是映射后到目前为止的样子（每个条目角落的刷新和删除按钮还不起作用..但我想添加一个 + 按钮以赋予它我刚才谈到的功能）

Answer 1

当按下 add do localStorage.setItem("name",value) 然后你可以通过 localStorage.getItem("name") 访问它