Question 177396 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Prevent State Overwrite React

I have a case like this
I have a current product

0: {id: "abc", name: "bigu", qty: 1, remarks: "nice"},
1: {id: "def", name: "moo", qty: 1, remarks: "handsome"}

When I add a new product

0: {id: "abc", name: "bigu", qty: 1, remarks: ""},
1: {id: "def", name: "moo", qty: 1, remarks: ""},
2: {id: "ghi", name: "ucing", qty: 1, remarks: ""},
3: {id: "jkl", name: "kepi", qty: 1, remarks: ""}

this is my first state and useEffect that change product list everytime I called addReq.product

const [productsLists, setProductsLists] = useState<Product[]>(addReq.product)

useEffect(() => {
    setProductsLists(addReq.product)
  }, [addReq.product])

I want the setProductsLists is not overwrite the current product that I already have and just adding a new product to the current array. The addReq is from my redux.

I already tried this methods but it causing infinite loops.

useEffect(() => {
  setProductsLists(prevProducts => {
    // Create a new array with the existing products and new products
    const updatedProducts = [...prevProducts, ...addReq.product];

    // Update the remarks of only the new products to an empty string
    const updatedProductsLists = updatedProducts.map((product, index) => {
      if (index >= prevProducts.length) {
        return { ...product, remarks: "" };
      }
      return product;
    });

    return updatedProductsLists;
  });
}, [addReq.product]);
Tags:

2

Answers


  1. 0

    do not modified products properties remarks at the end it will modified all avaliable products in the array with remarks properties

    do one thing update the require object first and then add it to array

    useEffect(() => {
let updateProdect = {...addReq.product,remarks: "" }
  setProductsLists(prevProducts => {
    // Create a new array with the existing products and new products
    const updatedProducts = [...prevProducts, ...updateProdect];

    // Update the remarks of only the new products to an empty string
    const updatedProductsLists = updatedProducts.map((product, index) => {
      if (index >= prevProducts.length) {
        return { ...product};
      }
      return product;
    });

    return updatedProductsLists;
  });
}, [addReq.product]);
    Login or Signup to reply.
  2. 0

    you can use UseRef:

    const productsList = useRef<Product[]>();
useEffect(() => {
    productsList.ref = { ...productsList, addReq.product };
}, [addReq.product]);

    But, you should understand that changing productsList.ref does not re-render the component: no further changes occur(you cannot render newly modified "productsList").

    you’d better consider using useSelector and useDispatch(with reducers).

    const products = useSelector(state => state.products);
const dispatch = useDispatch();
const setProducts = (newProducts: Product[]) => {
    dispatch(setProducts([...products, ...newProducts]));
}

    calling setProducts will lead to a "modified" productList

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search