Reactjs 为什么我的块只保存前一个状态而不保存当前状态？

我已经为新的wordpress编辑器做了一个块，我被卡住了。一切正常，除了保存页面时。发布的是块，但处于以前的状态

如果我关注一个可编辑区域，添加一个单词并按publish，最新添加的内容将不会出现在有效负载中。虽然我在记录组件属性时完全可以看到它。如果我第二次按publish，它会工作得很好

在我看来，有些种族状况或州政府管理我做错了。我对React和Gutenberg完全不熟悉

以下是我的保存功能：

从'@wordpress/editor'导入{RichText}；
从“类名称”导入类名称；
导出默认函数save（{attributes}）{
常量{align，figures}=属性；
const className=classnames（{[`has text align-${align}`]：align}）；
返回(

{figures.map（（figures，idx）=>(


) ) }

);
}

和我的编辑：

从'@wordpress/element'导入{Component}；
从'@wordpress/editor'导入{AlignmentToolbar，BlockControls，RichText}；
从'@wordpress/components'导入{Toolbar}；
从“类名称”导入类名称；
从“../../utils/StringUtils”导入{normalizeEmptyRichText}；
从“/删除图标”导入removeIcon；
常数最小值=1；
常数最大值=4；
导出默认类FigureEdit扩展组件{
构造函数（）{
超级（…参数）；
this.state={}；
对于（让idx=0；idx=最大数字，
onClick:（）=>this.addFigure（）
},
{
图标：removeIcon，
标题：“删除图形”，
isDisabled:this.props.attributes.figures.length this.removeFigure（）
}
];
返回(
setAttributes（{align}）}
/>

{figures.map（（figures，idx）=>(

this.onNumberChange（idx，number）}
占位符={！this.state[`figures[${idx}].number`].length？'33%：'}
/>
this.onDescriptionChange（idx，description）}
占位符={！this.state[`figures[${idx}]。description`].length？'Lorem ipsum door sit amet，concertetur adipising elit，sed do eiusmod tempor'：'}
/>

) ) }

);
}
}

问题与不变性有关，在我的

onChange

方法中，我对

figures

属性进行了变异。看来你不能那样做。如果你想要道具被正确刷新，你必须给一个新的对象

我的更改处理程序现在看起来如下所示：

onChange（idx，字段，值）{
const figures=this.props.attributes.figures.slice（）；
figures[idx][field]=normalizeEmptyRichText（值）；
返回this.props.setAttributes（{figures}）；
}

---

我怀疑这也解决了占位符问题。占位符现在按预期工作，我可以删除所有状态和构造函数代码。这证实了这与

setState

无关。注意，我在占位符上做了一个肮脏的攻击，我认为这是相关的。我的占位符与我的值重叠，直到我从组件中模糊出来。

setState

是异步的，因此它正在排队更新，而不是立即写入状态。您必须在

setState

上使用回调参数，或者使用生命周期方法，如

componentdiddupdate（）

这并不能真正解释为什么发布时我的状态不是最新的。输入和提交之间有几十秒的间隔。设置状态即使是异步的，也应该在几分钟内完成。

SetState

不会神奇地更新初始值