如何使用setSate更新内部的键和对象的值

Question

我认为我没有使用足够的对象(字典)，所以我有一个问题:我使用的是类型脚本，我有一个对象，它保存了一个状态中每个菜谱元素的所有数量。当用户更改大小时，我希望通过一个因子更新这些数量。flour2和oil是可选的，该对象的每个项都是一个数字(它们的类型是在其他地方定义的)

const [doughQuantities, setDoughQuantities] = useState({
    flour: doughRecipe.flour.quantity,
    flour2: doughRecipe.flour2?.quantity,
    water: doughRecipe.water.quantity,
    salt: doughRecipe.salt.quantity,
    yeast: doughRecipe.yeast.quantity,
    oil: doughRecipe.oil?.quantity
  })

  useEffect(() => {
    if (size === 'large') {
      const factor = 1.5
      setDoughQuantities(prev => Object.values(prev).forEach(element =>{
        element = element * factor
      }))
    }
  }, [size])

在输入我的setState函数时，我得到了以下内容：

“类型的参数”(prev：{ =>：number；flour2: number undefined；SetStateAction<：number : number；=>：number；oil: number；number；}) => void‘不能分配给'SetStateAction<{ salt: number；flour2: number number；oil: number；salt: number；酵母:number；oil:number；}’的参数.类型'(prev：{面粉:数字；flour2:数字:未定义的数字；水:数字；盐:数字；酵母:数字；油:未定义的数字；}) =>空洞‘是不可分配的类型'(prevState：{面粉:数字；flour2:数字未定义；水:数字；盐:数字；酵母:编号；油:数字未定义；}) => {面粉:编号；flour2:未定义的数字；水:数字；盐:数；酵母:编号；油:数字未确定；}’。类型'void‘不能分配到键入'{面粉:数字；flour2:数字:未定义的数字；水:数字；盐:数字；酵母:数字；油:未定义的数字；}’。

在这样一个对象中，如何读取和写入键的值？

Answer 1

您将state初始化为object，然后将其修改为array。

如果您想设置一个object并将每个属性的value乘以factor。

const [doughQuantities, setDoughQuantities] = useState({
    flour: doughRecipe.flour.quantity,
    flour2: doughRecipe.flour2?.quantity,
    water: doughRecipe.water.quantity,
    salt: doughRecipe.salt.quantity,
    yeast: doughRecipe.yeast.quantity,
    oil: doughRecipe.oil?.quantity
  })

useEffect(() => {
    if (size === "large") {
        const factor = 1.5;
        setDoughQuantities((prev) =>
            Object.fromEntries(
                Object.entries(prev).map(([key, value]) => {
                    return [key, value * factor];
                })
            )
        );
    }
}, [size]);