在不使用React中的Class方法的情况下，如何在更新状态后立即使用更新状态

Question

我有一个AddProduct组件，它的子级是Furniture组件(代码如下(，它有3个子级-3个输入字段。更改输入值会自动更新Furniture中的标注状态。

在提交AddProduct组件上的表格后，我想将维度以格式保存到数据库中。。x.x..(示例：120x100x200(使用组件家具恒定尺寸阵列。

错误在于父组件AddProduct使用倒数第二个状态，而不是最新的状态。

错误示例：如果我输入高度：123，宽度：123，长度：123，则组件AddProduct会将尺寸保存为缺少上次输入值的123x123x12。

在不使用Class方法(即不使用componentDidMount或setState(的情况下，如何解决此问题？

包括github链接的Howl表单可以在这里看到：http://tedisproject.infinityfreeapp.com/addproduct

import { useState, useRef, forwardRef, useImperativeHandle } from "react";
import FurnitureHeight from "./FurnitureHeight";
import FurnitureWidth from "./FurnitureWidth";
import FurnitureLength from "./FurnitureLength";
const Furniture = forwardRef((props, ref) => {
const [dimensions, setDimensions] = useState({
height: "",
width: "",
length: "",
});
const changeDimensions = (e) => {
const { name, value } = e;
setDimensions((prevState) => ({
...prevState,
[name]: value,
}));
const dimensionsArray = [
dimensions["height"],
dimensions["width"],
dimensions["length"],
];
props.setValue({
value: dimensionsArray.join("x"),
name: "specificAttribute",
});
};
return (
<div id="Furniture">
<FurnitureHeight
changeDimensions={changeDimensions}
changeIsValid={changeIsValid}
ref={dimensionsRef}
/>
<FurnitureWidth
changeDimensions={changeDimensions}
changeIsValid={changeIsValid}
ref={dimensionsRef}
/>
<FurnitureLength
changeDimensions={changeDimensions}
changeIsValid={changeIsValid}
ref={dimensionsRef}
/>
</div>
);
});
export default Furniture;

Answer 1

问题是您使用状态的值来异步构建dimensionsArray和状态更新，所以您总是得到旧值。为了解决这个问题，你可以在一个变量中设置新的维度，并使用它来更新状态和构建你的数组：

const changeDimensions = (e) => {
const { name, value } = e;
const newDimensions = {
...dimensions,
[name]: value
};
setDimensions(newDimensions);
const dimensionsArray = [
newDimensions["height"],
newDimensions["width"],
newDimensions["length"],
];
props.setValue({
value: dimensionsArray.join("x"),
name: "specificAttribute",
});
};