复选框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>        
))}
)
}

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.

}

Answer 2

由于setSizes是异步函数，您无法在setSizes之后立即获得sizes的更新值。

您应该在useEffect中添加一个sizes依赖项来获得它。

useEffect(() => {
setNewProduct({...newProduct, sizes: sizes})
}, [ sizes ])