reactjs 有没有更简单的方法从react-jsMapmetod？

9wbgstp7 于 2023-01-30 发布在 React

关注(0)|答案(3)|浏览(214)

import React, { useEffect, useState } from "react";
import axios from "axios";
import "./style.scss";

function Product() {
  function dataget() {
    axios.get(`http://localhost:9999/users/`).then((res) => {
      setProducts(res.data);
    });
  }

  const deleteclick = (_id) => {
    axios.delete(`http://localhost:9999/users/${_id}`).then(() => {
      dataget();
    });
  };

  const [products, setProducts] = useState([]);
  const [search, setSearch] = useState("");
  useEffect(() => {
    dataget();
  }, []);

  function handleclickplus() {
    setProducts([
      ...products.sort((a, b) =>
        a.title > b.title ? 1 : b.title > a.title ? -1 : 0
      ),
    ]);
  }
  function handleclickminus() {
    setProducts([
      ...products.sort((a, b) =>
        b.title > a.title ? 1 : a.title > b.title ? -1 : 0
      ),
    ]);
  }

  return (
    <div>
      <button onClick={() => { handleclickminus(); }}>Çoxdan aza</button>
      <button onClick={() => { handleclickplus(); }}>Coxdan aza</button>
      <input type={"text"} placeholder="search" onChange={(e) => { setSearch(e.target.value); }} />
      {products
        .filter((products) =>
          products.title.toLowerCase().includes(search.toLowerCase()))
        .map((element) => {
          return (
            <>
              <img src={element.imageUrl} alt="" />
              <h1>{element.description}</h1>
              <h1>{element.title}</h1>
              <h1>${element.price}</h1>
              <button onClick={() => { deleteclick(element._id); }}> delete</button>
            </>
          );
        })}
    </div>
  );
}

export default Product;

我试着在写作中让代码更好记、更短，但我无法完全达到我的目的。
我正在开发一个react应用程序，使用useState创建一个状态，它将通过props和sendData函数（通过父组件中的props更新状态）发送。它现在可以工作，但看起来很不优雅/就是很糟糕。

reactjs

来源：https://stackoverflow.com/questions/75259337/is-there-an-easier-way-to-map-metod-from-react-js

3条答案

按热度按时间

hc2pp10m1#

将此值减少a.title > b.title ? 1 : b.title > a.title ? -1 : 0
改为：a.title.localeCompare(b.title)对字符串进行排序

赞(0）回复(0）举报 2023-01-30

sr4lhrrt2#

有几件事可以提高性能。
1.使正在Map的内部组件成为组件本身，有助于防止在不需要时重新渲染。
1.记住过滤器Map函数，这样它就不需要运行每个渲染周期。或者创建一个useEffect来监视搜索项的变化，然后只在那时重新运行过滤器Map。
1.抽象出的日期获取到另一个“东西”，也许尝试jotai或反冲举行您的数据。

JS中的约定应为变量的camelCasing，例如：删除单击与删除单击
onClick函数调用cal只是传递一个函数，稍微清理一下
单击时={处理单击减}

赞(0）回复(0）举报 2023-01-30

0lvr5msh3#

我不太清楚你所说的“Map方法"是什么意思。但是根据你的代码，我有一些建议可以让你优化它，也许这会让你的代码更容易被记住。
首先，你可以创建一个新的组件来呈现产品卡，这将有助于你的代码更短，更容易阅读。

function ProductCard({ product, deleteProduct }) {
  return (
   <>
      <img src={product.imageUrl} alt="" />
      <h1>{product.description}</h1>
      <h1>{product.title}</h1>
      <h1>${product.price}</h1>
      <button onClick={() => { deleteProduct(product._id); }}> delete</button>
    </>
  )
}

我们可能会将产品列表部分更新为：

{products
   .filter((products) =>
      products.title.toLowerCase().includes(search.toLowerCase()))
   .map((product) => {
          return (
            <ProductCard 
              product={product}
              deleteProduct={(id) => deleteclick(id)}

          );
        })}

第二，你可以在你的组件中记住一个过滤Map函数，而不是每次都调用它。
第三，可以将axios调用作为服务移动到另一个JS文件，并在组件中调用它。
最后，我认为你可以用一个参数函数，比如sorter，来处理handleclickplus和handleclickminus函数。

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 有没有更简单的方法从react-jsMapmetod？

3条答案

相关问题

热门标签

最新问答