如何在反應鉤子中設置多個值來狀態 (How to set multiple values to state in react hooks)

問題描述

如何在反應鉤子中設置多個值來狀態 (How to set multiple values to state in react hooks)

我的代碼片段如下：

        <TextInput 
           type="number"
           id="qty"
           defaultValue={qty}
           onChange={checkValue}
           useRef={qty}
        />

        const checkValue= (err) => {     
            err.preventDefault();
            setState({[Id]:Number(err.currentTarget.value)});
        };

        <Button
          type="submit"
          onClick={onSubmit}
         >
               Update
        </Button>

        const onSubmit = err => {
            err.preventDefault();
            const items = Items.map(p =>({
                id:p.id
                quantity:state[p.id]?state[p.id]:p.qty
              }));
               list.updateList(items,id);
        };

我必須更新多個產品數量，但是上面的代碼只能更改一個產品，如果只更改兩個產品數量第二個產品數量正在改變，如何改變兩個產品的數量。如果我只給 p.qty 那麼即使我只改變一個產品，兩個產品都更新為相同的值。請幫忙

參考解法

方法 1:

Set an empty object by default in useState hook:

import React, {useState} from 'react';

const MyComponent = (props) => {
  const [values, setValues] = useState({});
  const setSingleValue = (key, value) => setValues({...values, [key]: value});
  . . .

  return (
    . . .
    <TextInput onChange={e => setSingleValue('value‑name', e.currentTarget.value)} . . . />
    . . .
  );
}

(by sai k、Michael Rovinsky)

參考文件

1. How to set multiple values to state in react hooks (CC BY‑SA 2.5/3.0/4.0)