javascript - 更新复选框中的状态延迟，React

Question

我必须对象sizes，newProduct我需要使用复选框设置可用大小，它工作正常但是：

当我选中两个框时，状态仅在第一个框中更新，然后当将sizes对象推送到newProduct对象时，newProduct直到我选中第三个框后状态才更新（仅更新第一个框的值）

这是我的代码：

function Products(){

    const [sizes, setSizes] = useState({
        s: false, m: false, l: false, xl: false, xxl: false, xxxl: false
    })
    const [newProduct, setNewProduct] = useState({
        productType : "", name : "", price : "", photo : "", sizes : sizes
    })

    const manageSizes = (e) => {
        
        const { name, checked} = e.target
        
        setSizes({...sizes, [name] : checked}) // late (1)
        
        setNewProduct({...newProduct, sizes : sizes}) // late (2)
        
    }
    return (
          {Object.keys(sizes).map((item, index) => (
                <label key={index} htmlFor={item}>{item}
                        <input 
                        type="checkbox"
                        checked={sizes[item]}
                        name={item} 
                        onChange={manageSizes}
                        />
                </label>        
          ))}
    )
}

标签： javascriptreactjscheckboxreact-hooks

Answer 1

您需要在设置新产品时使用新对象。

const manageSizes = (e) => {
    
    const { name, checked} = e.target
   
    setSizes({...sizes, [name] : checked})
    
    setNewProduct({...newProduct, sizes : {...sizes, [name] : checked}}) // <--- new object.
    
}

或将其设置为新变量

const manageSizes = (e) => {
    
    const { name, checked} = e.target
    const newSizes = {...sizes, [name]: checked }
   
    setSizes(newSizes) 
    setNewProduct({...newProduct, sizes : newSizes }) // <--- new object.
    
}