给数组赋索引，onClick根据item的位置传递

Question

我有一个搜索栏，显示来自 API 使用 .filter().includes(string) 的搜索建议。

简而言之：我需要为搜索结果数组动态分配索引 - 每次它显示不同数量的结果

如果有人键入 'b'，它会显示所有以 B 开头的项目。但是，onClick 只会将第一个添加到顶部。因为我是这样硬编码的。我需要找到一种方法来为搜索过滤器的每个项目设置一个索引，然后将它而不是像 [i] 那样的 [0]（i = 对应于数组中所需搜索的索引）传递给执行的这个函数点击

    const handleAdd = (e) => { // onClick={handleAdd} 
    e.preventDefault();
    setCryptolist(
      [ ... cryptolist , 
        {
      id: filteredCoins[0]['id'], // [i]
      current_price: filteredCoins[0]['current_price'], // [i]
      name: filteredCoins[0]['name'], // [i]
      symbol: filteredCoins[0]['symbol'], // [i]
      image: filteredCoins[0]['image'], // [i]
      price_change_percentage_24h: filteredCoins[0]['price_change_percentage_24h'], // [i]
      }
    ]
  )
}

如您所见，从这个数组中添加索引为 0 的项目是硬编码的：

(3) [{…}, {…}, {…}]
0: {id: 'bitcoin', symbol: 'btc', name: 'Bitcoin', image: 'https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579', current_price: 28982, …}

1: {id: 'binancecoin', symbol: 'bnb', name: 'BNB', image: 'https://assets.coingecko.com/coins/images/825/large/bnb-icon2_2x.png?1644979850', current_price: 307.58, …}

2: {id: 'binance-usd', symbol: 'busd', name: 'Binance USD', image: 'https://assets.coingecko.com/coins/images/9576/large/BUSD.png?1568947766', current_price: 1.001, …}

length: 3[[Prototype]]: Array(0)

如果我把问题解释清楚了，请告诉我，我该如何解决。

最后是我过滤搜索的方式：

  const filteredCoins = coins.filter(coin =>
    coin.name.toLowerCase().includes(search.toLowerCase())
  );

非常感谢任何帮助。

Answer 1

不确定我是否 100% 理解您的问题，但我认为您有这样的组件：

const CoinList = () => {
  // some code..
  const filteredCoins = /* ... */;

  const handleAdd = (e) => { /* ... */ };

  return (
    <div>
      {filteredCoins.map(coin => (
        <div key={coin.id} onClick={handleAdd}>{coin.name}</div>
      )}
    <div>
  );
}

您可以将索引（传递给 map 的函数的第二个参数）传递给 handleAdd，如下所示：

const CoinList = () => {
  // some code..
  const filteredCoins = /* ... */;

  const handleAdd = (e, i) => { /* use i here */ };

  return (
    <div>
      {filteredCoins.map((coin, i) => (
        <div key={coin.id} onClick={(e) => handleAdd(e, i)}>{coin.name}</div>
      )}
    <div>
  );
}

这将允许您根据需要在 handleAdd 函数中使用索引 i。

给数组赋索引，onClick根据item的位置传递

Assign index to array, and onClick pass it based on item's position

javascript

reactjs