I'm working on a React Native project. Right now, I'm adding new key/value inside an object.
It's working but I would like to know if there is a better way to do it or if you have any advice.
I'm still new to ReactJS/React Native and not 100% skills on Javascript. So here's my code :
My object
state = {
result : {
"q1":1
}
}
My function to add key/value and modify the state of result :
_getValue = (id, value) => {
var newObj = this.state.result;
newObj[id] = parseInt(value);
this.setState({
result: newObj
}, () => {
console.log(this.state.result)
})
}
Thank you !
this should work fine.
this.setState({
result: {
...this.state.result,
[id]: value
}
});
it uses modern/new features such as object spread (...this.state.result) and dynamic object properties ([id]: value)
Related
I'm using react native and my component is based on class base function. I'm facing difficulty in updating or adding object in an array..
My case :
I have an array:
this.state = {
dayDeatil:[]
}
now i want to add an obj in it but before that i want check if that object exist or not.
obj = { partition :1, day:"sunday","start_time","close_time",full_day:false}
in condition i will check partition and day if they both not match. then add an object if exist then update.
here is function in which i'm trying to do that thing.
setTimeFunc =(time)=>{
try{
console.log("time.stringify() ")
let obj = {
partition:this.state.activePartition,
day:this.state.selectedDay.name,
full_day:false,
start_time:this.state.key==="start_time"?time.toString():null
close_time:this.state.key==="close_time"?time.toString():null
}
let day = this.state.dayDetails.filter((item)=>item.day===obj.day&&item.partition===obj.partition)
if (day.length!==0) {
day[this.state.key]=time.toString()
this.setState({...this.state.dayDetail,day})
} else {
console.log("2")
this.setState({
dayDetails: [...this.state.dayDetails, obj]
})
}
this.setState({ ...this.state, clockVisiblity: false });
}
catch(e){
console.log("error -> ",e)
}
}
To check if the object exists or not, you can use Array.find() method, if it doesn't exists, the method will return undefined.
Now to update the state, the easier way would be to create a new array and set it as the new dayDetails state like this:
const { dayDetails } = this.state;
dayDetails.push(newData);
this.setState({ dayDetails: [...dayDetails] })
You should use the spread operator when setting the state because React uses shallow comparision when comparing states for a component update, so when you do [...dayDetails] you're creating a new reference for the array that will be on the state, and when React compares the oldArray === newArray, it will change the UI.
Also, after your else statement, you're updating the state with the state itself, it's good to remember that React state updates are asynchronous, so they won't be availabe right after the setState function call, this may be causing you bugs too.
I have done it using ...qqParam['queryParams'] but is this the right approach?
const qqParam = {};
if (view) {
qqParam['queryParams'] = { view: view };
}
if (productNumber) {
qqParam['queryParams'] = { ...qqParam['queryParams'], mode: 'productNumber' };
}
I think your approach is correct, just a couple things that can simplify your code while keeping it readable:
if you know you'll always need queryParam attribute, you can call it like this: qqParam.queryParam without the [], if the key of the attribute is dynamic then you're doing it ok by passing it as a variable qqParam[variable].
you're in both ifs modifying the same value so you might consider doing that on one statement:
qqParam.queryParams = {
...(view && {view}),
...(productNumber && {mode:'productMode' })
};
Your sample code works but you can simplify it.
You don't need to use the square brackets when assigning a property to the object unless it contains a symbol, a special character or a computed property name.
const qqParam = {};
if(view) {
qqParam.queryParams = { view };
}
if(productNumber) {
qqParam.queryParams = { ...qqParam.queryParams, mode: 'productNumber' };
}
Your approach is fine. one improve that you can do is not to use : {'view' : view}.
you can just use {view} as the default key will be the value name when you not specifing one.
Also, i guess that 'productNumber' should be the variable productNumber and not the string 'productNumber'.
const qqParam = {};
if (view) {
qqParam['queryParams'] = { view };
}
if (productNumber) {
qqParam['queryParams'] = { ...qqParam['queryParams'], mode: productNumber };
}
I am new at ReactJs and have a question about this two method:
1:
handleLike = movie => {
const movies = this.state.movies.map(m => {
if (m._id === movie._id) m.liked = !m.liked;
return m;
});
this.setState({ movies });
};
2:
handleLike = movie => {
const movies = [...this.state.movies];
const index = movies.indexOf(movie);
movies[index] = { ...movies[index] };
movies[index].liked = !movies[index].liked;
this.setState({ movies });
};
Q1: This two methods just toggle liked and work properly but i want to know there is any advantages or not?
Q2: What is purpose of this line in second method:
movies[index] = { ...movies[index] };
Don't use #1, at least not the way it is written. You are mutating the old state, which can easily cause bugs in react which assumes that state is immutable. You do create a new array, which is good, but you're not creating new elements inside the array. If you're changing one of the objects in the array, you need to copy that object before modifying it.
The better way to do #1 would be:
handleLike = movie => {
const movies = this.state.movies.map(m => {
if (m._id === movie._id) {
const copy = { ...m };
copy.liked = !m.liked;
return copy;
}
return m;
});
this.setState({ movies });
};
And that kind of gets to your question about #2 as well:
Q2: What is purpose of this line in second method:
movies[index] = { ...movies[index] };
The purpose of that is to make a copy of the movie. This lets you make a change to the copy, without modifying the old state.
Q1: This two methods just toggle liked and work properly but i want to know there is any advantages or not?
If you fix the mutation issue in #1, then it's pretty much a matter of preference.
Here's a simple test I've written of what I want to do with an immutable object
it('adds a new map with loaded data where the key is the ticker symbol', () => {
const state = Map();
const tickers = List.of('AAPL', 'TSLA', 'GOOGL');
const nextState = addTickerKeys(state, tickers);
expect(nextState).to.equal(fromJS({
tickers: ['AAPL', 'TSLA', 'GOOGL'],
data: {
AAPL: {},
TSLA: {},
GOOGL: {}
}
}));
})
How do I add the data object and the corresponding keys with empty data into the state object?
Here is what I have tried so far
export function addTickerKeys(state, tickers) {
const newState = setTickers(state, tickers);
const tickerList = newState.get('tickers');
return tickerList.forEach((value, key, iter) => {
return newState.setIn(['data', key]);
})
}
I've tried substituting value, key and iter in place of return newState.setIn(['data', key]) as per the docs (https://facebook.github.io/immutable-js/docs/#/Map/set)
However, I get the same response back each time,
AssertionError: expected 3 to equal { Object (size, _root, ...) }
Can someone explain to me what's going wrong? This seems a simple enough task but I seem to be struggling with Immutable objects and the documentation in TypeScript doesn't help.
Here's a quick answer to this, that I just figured out.
Immutable does not seem to have a great inbuilt function for this task and the way you have to return the state from a pure function is just frustrating.
Here's a quick and dirty solution to adding the object key value pairs.
export function addTickerKeys(state) {
const tickerArray = state.get('tickers');
let newState = Map();
for(let i = 0; i < tickerArray.size; i++){
ctr++;
newState = state.setIn(['data', tickerArray.get(i)], Map());
state = state.concat(newState);
if(i === tickerArray.size - 1){
return state;
}
}
}
If anyone else still has a different answer, a more elegant inbuilt solution perhaps do share.
A quick comment on your first solution:
Much like the native forEach method on Array.prototype, the forEach method on immutable List types is used for executing some side effect upon each iteration of the List. One subtle difference between the two, however, is when the callback function returns false on the immutable forEach, it will immediately end execution of the loop, whereas the native forEach is interminable. Here, you utilize the forEach method on Lists but are returning a value, suggesting that you might have confused it with the map method on immutable types and arrays. Unfortunately, map is not what you're looking for either.
Now, another solution:
function addTickerKeys(state, tickers) {
return tickers.reduce((acc, ticker) => {
return acc.setIn([ 'data', ticker ], Map());
}, Map({
tickers: List(tickers),
}))
}
I'm currently working on a simple filemanager component which I trigger from parent component. After selecting media in the filemanager I $dispatch a simple data object with 2 keys: element & media. I use element to keep track where I want the media to be appended to my current data object and media has the media information (id, type, name and so on). This setup gives me some trouble when I want to $set the media data to variables within my data object. The variables are locales, so: nl-NL, de-NL and so on.
setMediaForPage : function(data){
if(!this.page.media[this.selectedLanguage]['id'])
{
// set for all locales
var obj = this;
this.application.locales.forEach(function(element, index, array) {
obj.$set(obj.page.media[element.locale], data.media);
})
}
else
{
// set for 1 locale
this.$set(this.page.media[this.selectedLanguage], data.media);
}
}
What happens when I run this code is that the data object shows up properly in Vue Devtools data object, but the media does not show up in the template. When I switch the language (by changing the this.selectedLanguage value), the media does show up.
I think this has to do with the variables in the object keypath, but I'm not 100% sure about that. Any thoughts on how to improve this code so I can show the selected media in the parent component without having to change the this.selectedLanguagevalue?
I don't know your data structure exactly, but you can certainly use variables as the the keypath in vue, however remember that the keyPath should be a string, not an object.
If your variable that you want to use in the keypath is part of the vue, you'd do it like this:
obj.$set('page.media[element.locale]', data.media)
... because the keyPath which is a string is intelligently parsed by Vue's $set method and is of course it knows that this path is relative to the $data object.
new Vue({
el: '#app',
data() {
return {
msg: "hello world",
attr: {
lang: {
zh: '中文',
en: 'english'
}
}
}
},
methods: {
$set2(obj, propertyName, value) {
let arr = propertyName.split('.');
let keyPath = arr.slice(0, -1).join('.');
let key = arr[arr.length - 1];
const bailRE = /[^\w.$]/
function parsePath(obj, path) {
if (bailRE.test(path)) {
return
}
const segments = path.split('.')
for (let i = 0; i < segments.length; i++) {
if (!obj) return
obj = obj[segments[i]]
}
return obj
}
let target = parsePath(obj, keyPath);
// console.log(target, key);
// target[key] = value;
this.$set(target, key, value);
}
},
mounted() {
setTimeout(() => {
// this.$set('attr.lang.zh', '嗯');
// this.$set2(this, 'attr.lang.zh', '嗯');
this.$set2(this.attr, 'lang.zh', '嗯');
}, 1000);
}
})
调用示例：this.$set2(this.attr, 'lang.zh', '嗯');
i have also experienced similar problems，remove variables -,these variables nl-NL, de-NL change to nlNl, deNl
and i not use
obj.$set('page.media[element.locale]', data.media)
but
obj.$set('page.media.'+element.locale, data.media);
then it work