FormSpy - 在脏污上更改订阅不会在输入字段中显示值

Question

我们正在使用FormSpy，订阅了脏。FormSpy中的OnChange函数将在redux中更新脏标签，当脏为真时。当我输入任何输入字段时，第一个字母不会显示，但 redux 状态会更新为第一个字母笔划上的dirty:true。

表单也写在不同的文件中使用

<Form
component={Theform}
/>

这就是我们使用FormSpy的方式

<FormSpy
subscription={{ dirty: true }}
onChange={state => this.updateDirty(state.dirty)}
{...props}
/>
updateDirty(isDirty) {
const { toggleIsDirty, dirtyState } = this.props;
if (isDirty) {
if (!dirtyState.isDirty) {
toggleIsDirty();
}
}
}

如果未完成if (isDirty)检查，它会不断更新存储值，但不会在输入字段中显示任何内容。 我们哪里做错了？

更新： 我无法复制粘贴实际代码，但这是它的外观。

行动.js

const toggleDirty = () => ({
type: types.TOGGLE_DIRTY,
});
export { toggleDirty };

减速机.js

const dirtyState = (state = { isDirty: false}, { type }) => {
switch (type) {
case types.TOGGLE__DIRTY: {
return {
isDirty: !state.isDirty,
};
}
default: return state;
}
};

模态.jsx

class Modal extends Component {
render () {
const {storeValues} = this.props;
const initialValues = {
field1: storeValue.field1,
field2: storeValue.field2
}
return {
<Form 
id="detailsForm"
initialValues={initialValues}
component={DetailsForm}
/>
}
}
}
const mapStateToProps = ({ storeValues }) => ({
storeValues,
});
export default connect(mapStateToProps, null)(Modal);

DetailsForm.jsx

class DetailsForm extends Component {
constructor(props) {
super(props);
this.updateDirty = this.updateDirty.bind(this);
}
updateDirty(isDirty) {
const { toggleIsDirty, dirtyState } = this.props;
if (isDirty && !dirtyState.isDirty) {
toggleIsDirty();
}
}
render() {
const {updateDirty} = this;
const {
intl, submitError, submitErrors, submitFailed, dirty, handleSubmit, form, errors, values, ...props
} = this.props;
return{
<form onSubmit={handleSubmit} className="benefit-form">
<FormSpy
subscription={{ dirty: true }}
onChange={state => updateDirty(state.dirty)}
{...props}
/>
<React.Fragment>
<Input .... />
</React.Fragment>
</form>
}
}
}
const mapStateToProps = ({ dirtyState}) => ({
dirtyState,
});
const mapDispatchToProps = dispatch => ({
toggleIsDirty() {
dispatch(toggleDirty());
},
});
export default connect(mapStateToProps, mapDispatchToProps)(DetailsForm);

当我在输入中键入类似"123"的内容时，仅显示"23"。当我键入第一个数字时，它只是将商店中的isDirty标志变为 true。 在调试时，我发现 updateDirty 为输入的第一个字符调用了两次 - 一次isDirty为真，另一次为假。

我在 FormSpy 的更改中放置了一个控制台日志，它在初始表单加载期间被触发，dirty为 false。当我输入第一个字母时，它会更新为 true，调度操作，然后立即再次触发 false。然后不会显示该字母。但是从第二个字母来看，它表现正常。 当我使用本地状态和 setState 而不是调度时，这没有任何问题。

我们使用该标志在离开包含脏数据的页面时显示模式。

Answer 1

当你的状态存储在多个位置，并且状态是由一个未内置到 React 中的事件更新的，你会得到你的组件被渲染多次的行为，数据可能冲突，就像你的情况一样，脏状态不一致。一旦数据达到预期状态，此重新渲染将停止，在您的情况下，脏状态是相同的。

选项 1

仅从其中一个存储读取状态。在您的情况下，忽略最终表单传递的内容，并且仅从 redux 读取

选项 2

找到触发第一个非反应事件的位置，并将其包装在unstable_batchedUpdate