更新复选框中的状态延迟，React答案

【问题标题】：update state delay in checkbox, React更新复选框中的状态延迟，React
【发布时间】：2021-03-12 13:15:25
【问题描述】：

我必须对象 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>        
          ))}
    )
}

【问题讨论】：

标签： javascript reactjs checkbox react-hooks

【解决方案1】：

由于setSizes是异步函数，所以无法在setSizes后立即获取sizes的更新值。

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

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

【讨论】：

但是如何在manageSize 函数中实现useEffect 钩子？
不要在 manageSize 函数中实现 useEffect，只需在 Products() {...} 中定义它即可
它可以工作，但有一个警告：React Hook useEffect has a missing dependency: 'newProduct'. Either include it or remove the dependency array. You can also do a functional update 'setNewProduct(n => ...)' if you only need 'newProduct' in the 'setNewProduct' call
或者试试这个setNewProduct(prevProduct => {...prevProduct, sizes: sizes})
@semeon 的解决方案没有任何警告，非常感谢您的帮助

【解决方案2】：

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

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.
    
}

【讨论】：

是的，这没有任何错误或警告，谢谢。