如何计算地图中过滤项目的数量？

IT技术 reactjs
2022-07-26 08:38:53 
    export const ProductList = (props) => {
     const [search, setSearch] = useState("");

我尝试创建一个常量计数，但不工作

     return (
        <div id="product-list">
          <header>
            <input 
              type="text"
              placeholder='Search...'
              onChange={(event)=>{
                setSearch(event.target.value);
              }}
            />

我需要根据过滤器产品动态显示。长度只显示总计

        <strong>Product List ({products.length} items)</strong>
    
    
          </header>
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Department</th>
                <th>Price</th>
              </tr>
            </thead>
            <tbody>
            {products.filter((val)=>{
              if(search == "") {

我尝试返回计数 = 0

                return val
              } else if(val.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())) {

并返回 count = val.length 但 count 不起作用

                 return val
              }
            }).map((val, key) =>{
              return <tr key={key}>
                  <td>{val.id}</td>
                  <td>{val.name}</td>
                  <td>{val.department}</td>
                  <td>{val.price}</td>
                </tr>;
            })}
            </tbody>
          </table>
        </div>
      )
    }
2个回答

您可能会在此处遇到问题，因为您正在 JSX 中内联执行过滤器。相反，我建议在您的 JSX 之外执行此操作，然后只显示过滤后的产品。请参阅下面的示例：

export const ProductList = (props) => {
   const [search, setSearch] = useState("");
   const [products, setProducts] = useState([ // ... your products array here ]);
   const [filteredProducts, setFilteredProducts] = useState([]);

   const onSearch = (val) => setSearch(val)

   useEffect(() => {
      const _filteredProducts = products.filter((val) => {
          if(search == "") {
              return val
          } else if(val.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())) {

              return val
          }
      })
      setFilteredProducts(_filteredProducts)
   }, [search, products])

   ...

然后在你的 JSX 中，你可以直接映射到过滤的产品上。让我知道这个是否奏效！

你可以做这样的事情

const [displayProduct, setDisplayProduct] = useState(products)

useEffect(() => {
  setDisplayProduct( products.filter(p => p.name.lowerCase().includes(search.toLowerCase())))
}, [search])

你可以使用displayProduct.length并displayProduct.map渲染你的 JSX

其它你可能感兴趣的问题
上一篇各级组件的递归渲染 下一篇如何在输入字段reactjs中设置输入字母数字值格式？