[PROJECT-JULABO-React] setState

6161 ワード
買い物かご React setState テキストリンク
カートの数を変更するたびに、変更した数はセッションストレージに保存されますが、遅くなります.
const [quantity, setQuantity] = useState();

... 

const addQuantity = (e, id) => {
    e.preventDefault();

    const addQuan = cartItems?.map(cartItem => {
      if (cartItem.cart_id === id) {
       
        setQuantity(prev => prev + 1);
     
        return { ...cartItem, quantity: quantity. };
      } else return cartItem;
    });
    setCartItems(addQuan);
  };
まず、選択した商品が何であるかを判別する条件文で判断し、その商品が正しい場合、setQuantity関数により前の数量値に1を加算する方法である.
その後、setで変更後の値をmap関数の戻り文に送信すると、スローショットの状態が変更されます.
これはsetState関数の挙動が非同期であり,コード的には上から下へと見えるが,非同期性はすぐに反映されていないようだからである.
💡 私が知りたいのは、初めて「増分」ボタンを押したとき、リズムが遅くなり、2回目の増加から順調だったようですが、私たちもこの問題を見るべきだと思います.
この問題を解決するために,1つの関数に数量と設定数量を同時に書き込むのではなく,変数を数量に置き換える方法を採用した.
const addQuantity = (e, id) => {
    e.preventDefault();

    const addQuan = cartItems?.map(cartItem => {
      if (cartItem.cart_id === id) {
        const curr = +quantity + 1;

        setQuantity(curr);

        return { ...cartItem, quantity: curr };
      } else return cartItem;
    });
    setCartItems(addQuan);
  };
currという名前の変数を宣言し、その変数にquantityを+1すると、その変数はうまく機能します.
setStateの理解が不足しているため、Hookのドキュメントを再表示する必要がある場合があります.
プレイフレームワークにおける例外とエラーの処理
リストレンダリングにビューを含める強力で実績のある方法