reactjs


Children with the same key: Object.assign vs _.merge


I am wondering if I fully understand the difference between assign and merge in javascript. Whenever the following reducer updates the state I get the Encountered two children with the same key error
function updateKeyframes(state, action) {
const { keyframeIds, props } = action.payload;
const newKeyframes = _.map(keyframeIds, function(id) {
return _.merge(state.keyframes[id], props);
});
return Object.assign({}, state, {
keyframes: Object.assign({}, state.keyframes, newKeyframes)
});
}
However, if I calculate newKeyframes in a different way the error disappears.
const newKeyframes = keyframeIds.reduce((memo, keyframeId) =>
Object.assign({}, memo, {
[keyframeId]: Object.assign({}, state.keyframes[keyframeId], props)
}), {});
Why? What is going on here?
In your first example newKeyframes is an array. In your second example newKeyFrames is an object. There is an obvious difference then in:
Object.assign({}, state.keyframes, newKeyframes)
if newKeyFrames is an array, the key replacement won't probably go as expected.

Related Links

In React with Redux, when should I save data to back end
Can shouldComponentUpdate returning false clobber a previous update where shouldComponentUpdate returns true?
Passing className prop to Material-ui child/inner elements
Code splitting using webpack for example https://github.com/erikras/react-redux-universal-hot-example
Reactjs calender picker
React with sort and filter
Reactjs not rendering to HTML in Ubuntu 14
Test text input with react and jest
How do I add an image to the DOM after another image has loaded?
why is this.state.records.amount undefined?
How to upload file on server with react, redux
Diagnostics feature in Angular 2 vs React
React- Elegantly Toggle State Visibility
React Single Page app with browserHistory possible?
Assign reducer to nested state property?
ReactJS rendering issue

Categories

HOME
virtual-machine
fortran
openacc
mysqli
mingw
google-docs-api
perl6
sugarcrm
ms-access-2010
samsung-gear-s2
yacc
annyang
wowza
distinct
monad-transformers
cherrypy
dev-c++
matlab-gui
infinite-loop
ppp
windowserror
inspec
windows-mobile
stack-trace
scripting-language
jboss-arquillian
language-detection
snapkit
powerbi-embedded
odp.net
sampling
azure-vm-scale-set
const
ninja-forms
jvisualvm
google-cloud-powershell
taiga
codepen
ocpjp
android-doze-and-standby
mef
standard-error
gige-sdk
intermediate-language
tsc
firebase-job-dispatcher
eclipse-mars
settext
class-design
scriptengine
bytearray
boost-bind
custom-build-step
std
askbot
android-facebook
mojolicious
transbase
random-sample
lytro
grails-3.0.9
avd
data-quality-services
iphone-6
uiblureffect
fxmlloader
tigase
selenium-grid2
oxygenxml
dotcmis
visual-c#-express-2010
django-tests
grunt-wiredep
thucydides
nsnumber
record-locking
xrandr
codeigniter-form-helper
simplemembership
mmo
moonscript
jmesa
mscorlib
virtual-printer
httppostedfilebase
service-layer
n2
marathontesting
chars
nstoolbar
dynamic-scope
scala-designer
weak-typing
hotfix

Resources

Encrypt Message