Блог

У меня есть объекты 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>        
          ))}
    )
}
 

Вам нужно использовать новый объект при настройке нового продукта.

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

Как setSizes и в случае с асинхронной функцией, вы не можете получить обновленное значение sizes сразу после setSizes .

Вы должны получить это в процессе useEffect добавления sizes зависимости.

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