reactjs - 如何在反应钩子中设置多个值来状态

Question

我的代码片段如下：

        <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 然后即使我只更改一个产品，两个产品都更新为相同的值。请帮助解决这个问题

标签： reactjsreact-nativereact-hooksuse-effectuse-state

Answer 1

useState在钩子中默认设置一个空对象：

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)} . . . />
    . . .
  );
}