-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug with setState in event handlers #1023
Comments
Here is the new test which should fail: import React from "react";
import { render, fireEvent } from "react-testing-library";
import Form from "../src";
it("should call provided change handler and keep the form state", () => {
const schema = { title: "Foo", type: "string" };
class App extends React.Component {
state = { calls: 0 };
handleChange = ({ formData }) => {
this.setState(prevState => ({ calls: prevState.calls + 1 }));
};
render() {
return (
<Form
schema={schema}
onChange={this.handleChange}
safeRenderCompletion={true}
/>
);
}
}
const { getByLabelText } = render(<App />);
const input = getByLabelText("Foo");
fireEvent.change(input, { target: { value: "bar" } });
expect(input.value).toBe("bar"); // => fails, received: ""
}); It doesn't fail in CodeSandbox (bug?) but if you download the demo and try it on the local then you see that it fails. |
I've found the source of the issue. It's in the I'm working with my fork (which uses templates from #1013 and it uses jest) but here is related commit. |
Now I'm not using cWRP (I've completely removed it) at all. It looks like that the prop |
Uh, it took me several hours to find this. My current workaround: extend |
Any update on this? @Leksat can you please guide how can I follow your work around using hooks? |
import Form from 'react-jsonschema-form';
class FixedForm extends Form {
componentWillReceiveProps(nextProps) {
const shouldSkipUpdate =
Object.keys(nextProps).length === Object.keys(this.props).length &&
Object.keys(nextProps).filter(
key =>
key !== 'children' &&
// Maybe some other logic.
nextProps[key] !== this.props[key]
).length === 0;
if (shouldSkipUpdate) {
return;
}
super.componentWillReceiveProps(nextProps);
}
} |
@Leksat hey, thanks for responding. Much appreciated. I just tested it. It works but for a few seconds. Here are my code: form.js
my custom-form.js in components folder
then in my component where I use it, I do
|
Hi, I am having this issue too, is there any update on this bug already ? In the meantime I'll use this workarround :) |
#2010 looks relevant to this and might help with remediation. |
?This may actually be fixed in the v5 beta... Can someone please verify? |
Nop, still persists check https://codesandbox.io/s/sparkling-cdn-yrmhq5 |
A much simpler workaround is to store the full form data and provide it on each render. The code looks something like this: const [formData, setFormData] = useState({});
const onChange = (e) => {
setFormData(e.formData);
// Set whatever else you need here.
};
return <Form
onChange = {onChange}
formData = {formData}
// other properties omitted.
/> |
This issue has been automatically marked as possibly close because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you. |
This issue was closed because of lack of recent activity. Reopen if you still need assistance. |
Prerequisites
Description
There is an App which renders rjsf Form. When you call App's
setState(updates value unrelated with the form's props)
inForm.props.onChange
then Form loses its internal state.Steps to Reproduce
Here is a reproducible demo.
Expected behavior
Form shouldn't loose its state.
Actual behavior
Form lost its state.
Version
1.0.4
The text was updated successfully, but these errors were encountered: