此过滤方法在控制台中有效，但在 ui 中无效

Question

我想通过过滤方法过滤项目，我做到了，但它在 UI 中不起作用，但在
中不起作用当我在控制台中记录它时它工作正常
我不知道问题出在哪里我放了2张图片
这段代码的解释：
通过 map 方法在 currencies_info 内循环并在我单击它时显示它们，这完全有效然后我想在用户在其中输入输入时过滤列表我使用过滤方法并且这完全在控制台中工作而不是在 UI

import React, { useState } from "react";

// Artificial object about currencies information
let currencies_info = [
  {
    id: 1,
    name: "بیت کوین (bitcoin)",
    icon: "images/crypto-logos/bitcoin.png",
    world_price: 39309.13,
    website_price: "3000",
    balance: 0,
    in_tomans: 0
  },
  {
    id: 2,
    name: "اتریوم (ethereum)",
    icon: "images/crypto-logos/ethereum.png",
    world_price: 39309.13,
    website_price: "90",
    balance: 0,
    in_tomans: 0
  },
  {
    id: 3,
    name: "تتر (tether)",
    icon: "images/crypto-logos/tether.png",
    world_price: 39309.13,
    website_price: "5",
    balance: 0,
    in_tomans: 0
  },
  {
    id: 4,
    name: "دوج کوین (dogecoin)",
    icon: "images/crypto-logos/dogecoin.png",
    world_price: 39309.13,
    website_price: "1000000",
    balance: 0,
    in_tomans: 0
  },
  {
    id: 5,
    name: "ریپل (ripple)",
    icon: "images/crypto-logos/xrp.png",
    world_price: 39309.13,
    website_price: "1,108",
    balance: 0,
    in_tomans: 0
  }
];

export default function Buy() {
  // States
  let [api_data, set_api_data] = useState(currencies_info);
  const [currency_icon, set_currency_icon] = useState("");
  const [currency_name, set_currency_name] = useState("");
  const [currency_price, set_currency_price] = useState(0);
  const [dropdown, set_drop_down] = useState(false);
  let [search_filter, set_search_filter] = useState("");

  // States functions
  // this function just toggle dropdown list
  const toggle_dropdown = () => {
    dropdown ? set_drop_down(false) : set_drop_down(true);
  };
  // this function shows all currencies inside dropdown list and when click on each item replace
  //  the currency info and hide dropdown list
  const fetch_currency = (e) => {
    set_drop_down(false);
    currencies_info.map((currency) => {
      if (e.target.id == currency.id) {
        set_currency_name(currency.name);
        set_currency_icon(currency.icon);
        set_currency_price(currency.website_price);
      }
    });
  };
  // this function filter items base on user input value
  const filter_currency = (e) => {
    set_search_filter = currencies_info.filter((currency) => {
      return currency.name.indexOf(e.target.value) !== -1;
    });
    api_data = set_search_filter;
    console.log(api_data);
  };

  return (
    <div className="buy-page-input" onClick={toggle_dropdown}>
    {/* currency logo */}
    <div className="currency-logo">
    <img src={currency_icon} width="30px" />
    </div>
    {/* currency name in persian */}
    <span className="currency-name">{currency_name}</span>
    {/* currency dropdown icon */}
    <div className="currency-dropdown">
    <img className={dropdown ? "toggle-drop-down-icon" : ""}
    src="https://img.icons8.com/ios-glyphs/30/000000/chevron-up.png"
    />
    </div>
    </div>
    {/* Drop down list */}
    {dropdown ? (
    <div className="drop-down-list-container">
    {/* Search box */}
    <div className="search-box-container">
    <input type="search" name="search-bar" id="search-bar"
    placeholder="جستجو بر اساس اسم..."
    onChange={(e) => {
    filter_currency(e);
    }}/>
    </div>
    {api_data.map((currency) => {
    return (<div className="drop-down-list" onClick={(e) => { 
    fetch_currency(e);}} id={currency.id}>
    <div class="right-side" id={currency.id}>
    <img src={currency.icon} width="20px" id={currency.id} />
    <span id={currency.id}>{currency.name}</span>
    </div>
    <div className="left-side" id={currency.id}>
    <span id={currency.id}>قیمت خرید</span>
    <span className="buy-price" id={currency.id}>
        {currency.website_price}تومان</span>
    </div>
    </div>);})}
    </div>) : ("")});}

Answer 1

你的 search_filter 在我看来是多余的。
尝试像这样更改 filter_currency 函数：

const filter_currency = (e) => {
    const search = e.target.value;
    const filtered = currencies_info.filter((currency) => {
        return currency.name.includes(search);
    });
    set_api_data(filtered);
};

Answer 2

看起来你在设置过滤器状态后从未设置 api_data。

更改以下内容

api_data = set_search_filter
console.log(api_data)

到

api_data = set_search_filter
set_api_data(api_data)

但是，看起来 set_search_filter 从未被使用过，只是为了进一步改进而设置的，您可以删除该状态并直接设置 api_data。像这样：

const filter_currency = (e) => {
    const search_filter = currencies_info.filter((currency) => {
        return currency.name.indexOf(e.target.value) !== -1
    })

    set_api_data(search_filter)
}

Answer 3

像这样将状态值从字符串更改为 search_filter 的数组 -

let [search_filter, set_search_filter] = useState([]);

也应该是这样的-

const filter_currency = (e) => {
  const filterValues = currencies_info.filter((currency) => {
    return currency.name.indexOf(e.target.value) !== -1;
  });
  set_search_filter(filtervalues);
  set_api_data(filterValues);
  console.log(filterValues);
};

并使用 useEffect 和 search_filter 作为依赖，这样每次设置 search_filter 值时，useEffect 都会触发重新渲染，例如：-

useEffect(()=>{
 //every time search_filter value will change it will update the dom.
},[search_filter])

此过滤方法在控制台中有效，但在 ui 中无效

This filter method is working in console but not in ui in react

javascript

filter

reactjs

use-state