-
Notifications
You must be signed in to change notification settings - Fork 45.6k
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
Invalid "Mutating style
is deprecated." warning in 0.14.0-rc1?
#4877
Comments
Looks like your fontSize is getting set to NaN. If you have it as any other value then you won't get the warning. We can probably have shallowEqual treat two NaNs as the same. |
Is it Yep, I think it makes sense for |
JSON.stringify({a: NaN}) === '{"a":null}' So I'm willing to bet @spicyj did his debugging right :) |
@zpao All I'm saying is that if fontSize is getting |
Sure, I'm saying the language doesn't make that easy for us to do. |
@zpao I'd prefer the |
It should use |
Fixes facebook#4877. I opted not to change shallowEqual for this since it seems relatively one-off.
Fixes facebook#4877. I opted not to change shallowEqual for this since it seems relatively one-off.
Is this fix in 0.14.3? I got a similar issue with react 0.14.3. |
@programnext |
I see. Thanks @cody. Is there anyway to workaround the issue since I have no access to marginLeft prop directly. |
@thanzen We could probably make an error message that is a bit more informative (#5773), but specifying a margin of NaN seems like it should always be an error/warning. Can you elaborate on what you mean by "I have no access to marginLeft prop directly"? If you mean you are using a third-party component that sets the property incorrectly, that component author should fix the issue. |
@jimfb Tangential, perhaps we should explicitly warn whenever |
@jimfb, yes, it is a third party component, and I will log the issue under that repo instead. |
I don't have any null or NaN values and still get this error when updating style via Dispatcher -> Store - > changeListening. Any thoughts?
|
@essekia You added fontSize: 15px. You need to create a new style object instead of changing the existing one. |
Used jQuery's extend to clone the object and that solved it. Thanks @spicyj |
I ran into this issue while using ... style={Object.assign({}, styles.input, this.state.error ? {color: 'red'} : {}) ... |
I don't have any NaN or null, and there are no new style added. I get the same warning as above. Anyone have idea about this? thx~
|
@webpansy The |
Hello. I am using observables with React. Mutating the store is exactly what is being done so that the views subscribe to these changes and re-render if needed. I am using mobx. For the context: I am moving a character on the screen. Sometimes I reset its position. These two examples mutate the styles in the store. But in one case, the warning will appear while in the other case it won't. This shows some incoherence. This does not throw a warning:
This throws a warning:
Mutation occurred in both cases. Remember that I use observables, so it's valid and expected to simply change values instead of using immutables or "simulate" them by cloning / creating new objects. What is your opinion about this use case? PS: I wasn't sure about creating a new issue for this but it felt like a continuation to your last comment. I can create a new issue. |
@AoDev the first does not throw a warning because of this line: const style = { ... }; That's creating a new style object with a new memory reference, so you're actually not passing a mutated object. In the second you're passing You can fix the second with: <div style={Object.assign({}, store.style)} /> Be sure to do this with care though because of the performance implications (passing props like this to pure children will always force a render, removing the benefits of pure components). |
@rickhanlonii Thanks, I realised this later but forgot I had commented here. |
I use pure components heavily and this is starting to become a big problem for me. As far as I can conclude, I have two options:
Is there anything I can do about it? |
I get the following warning in 0.14.0-rc1:
I'm confused why this warning appears because the "Previous style" and the "Mutated style" look exactly the same.
To reproduce the issue:
Then open
http://localhost:3000/dist/index.html
in a browser, and:Now you should see the warning in the console.
Why this warning is displayed? How could I fix it?
The text was updated successfully, but these errors were encountered: