I have the following code. The code is complaining about Use object destructuring.eslint(prefer-destructuring) as shown in image in red marks. How i can solve this issue ? I had a look here but https://eslint.org/docs/rules/prefer-destructuring not sure where i am doing wrong ?
GET_GEOCODE_FROM_ZIPCODE(state, action) {
const { res } = action;
if (res && res.address && res.zipcode) {
const zipcode = res.zipcode;
const address = res.address;
return {
...state,
geoCode: {...action.res, address},
zipcode,
showCallout: true
}
}
return state
}
You have to destructure your object :
const { address, zipcode } = res;
Eslint wants you to use destructuring:
const { zipcode, address } = res;
You can read more about object destructuring here:
Related
I'm trying to pass state data after navigating to a new route and typescript is telling me
Property 'email' does not exist on type 'State'."
Parent functional component:
navigate('/check-mail', { state: { email: "hello, I'm an email" } });
Child functional Component:
const SentPasswordResetInstructions = () => {
const location = useLocation();
let { email } = location.state;
}
I've tried creating an interface like so:
interface propState { email : string }
and then using
useLocation<propState>();
However that throws additional errors. How do I fix this ??
Just solved it! Creating the interface:
interface propState {
email: string;
}
And then using
let { email } = location.state as propState;
Worked!
useLocation().state is undefined by default, such as when you navigate directly to this route. Because of this, destructuring properties from it can throw an error because you'll essentially be doing
const { email } = undefined;
I recommend using some form of type guard or validator (such as Zod) for the state, so that you can handle situations where it might not contain any data.
type MyState = { email: string }
function isStateValid(state: any): state is MyState {
if (!state) return false; // Makes sure it's not null
if (typeof state !== "object") return false;
if (typeof state.email !== "string") return false;
return true;
}
const { state } = useLocation(); // state is any or unknown
if (isStateValid(state)) {
const { email } = state; // state is MyState here
}
I'm trying to initialize my state with the redux state that I have stored. However, when I try to map through one of the lists stored in the state it just resets the values that I have inside the list instead of returning their substring values (which I want). The thing is if I print mail.substring(0, mail.length -10) I see the value that I would like to assign to the variable but after assigning the value is empty.
Here comes the strange part: if I were to assign "hello" instead of mail.substring(0, mail.length-10) then it works which could make you assume that the substring would return an empty value but as I mentioned above it does not.
I guess this might be because I create a shallow copy of the redux state but I'm not sure. Could you help me resolve this, please?
const membershipData = useSelector(getCompanyMembershipDetails);
function getInitState() {
if (membershipData !== null && membershipData !== undefined) {
const newState = { ...membershipData };
newState.members.map((m) => {
const mail = m.contact.countersignEmail;
const newVal = mail.substring(0, mail.length - 10);
m.contact.countersignEmail = newVal;
return m;
});
return newState;
} else
return {
members: [getEmptyMemberStateForId(0), getEmptyMemberStateForId(1)],
membershipRates: [
getEmptyPropertyContributionForId(0),
getEmptyPropertyContributionForId(1),
],
registrationPermissions: [],
};
}
const [membersData, setMembersData] = useState(getInitState());
It was because of the shallow copy as I thought. Using cloneDeep from lodash I made a working version:
const membershipData = useSelector(getCompanyMembershipDetails);
function getInitState() {
if (membershipData !== null && membershipData !== undefined) {
const newState = _.cloneDeep(membershipData);
newState.members.map((m) => {
const mail = m.contact.countersignEmail;
const newVal = mail.substring(0, mail.length - 10);
m.contact.countersignEmail = newVal;
return m;
});
return newState;
} else
return {
members: [getEmptyMemberStateForId(0), getEmptyMemberStateForId(1)],
membershipRates: [
getEmptyPropertyContributionForId(0),
getEmptyPropertyContributionForId(1),
],
registrationPermissions: [],
};
}
const [membersData, setMembersData] = useState(getInitState());
If you use lodash the way I did above make sure to import it the following way:
import _ from "lodash";
Currently receiving a error stating Cannot convert undefined or null to object
The data the app is looking for comes from initial props.
I assume on the initial check no data is present, so it throws that error.
Would this be solved with an async/await ?
The initial posts_mentions is defaulted as an empty object
Here is the error image:
Here is the current code snippet
const { posts_mentions: postsMentions } = useData();
const data = Object.keys(postsMentions).map(label => {
return {
name: shortName(label),
posts: postsMentions[label].posts,
mentions: postsMentions[label].mentions
}
})
async function something(){
const { posts_mentions: postsMentions } = await useData();
const data = Object.keys(postsMentions).map(label => {
return {
name: shortName(label),
posts: postsMentions[label].posts,
mentions: postsMentions[label].mentions
}
})
}
Yes. Try adding await before useData(). And if this is all part of bigger function than mark it as async. How does the useData() look? Is something async in it?
I have a problem with my dispatch.
Somehow it returns undefined even tho when I loged value of the input i want to pass I got the correct value.
Here is my reducer.
case actionTypes.ADD_COMMENT:
return {
...state,
posts : [
...posts,
{
comment : action.payload.comment,
}
]
}
export const addComment = (payload : any) => {
return {
type: actionTypes.ADD_COMMENT,
payload
}
}
And here is how i m passing the value to the dispatch.
if (commentValue) {
let commentVal = commentValue.value
console.log('--------commentVal', commentVal);
dispatch(actions.addComment({commentVal}))
}
Any suggestions?
It should be
dispatch(action.addComment({comment: commentVal}))
since you are accessing the comment property on the payload in your reducer
I don't know why I got an error on the reducer
reducer code
case ADD_COMMENT_SUCCESS: {
const postIndex = state.mainPosts.findIndex(v => v.id === action.data.postId);
const post = state.mainPosts[postIndex];
const Comments = [...post.Comments, action.data.comment];
const mainPosts = [...state.mainPosts];
mainPosts[postIndex] = { ...post, Comments };
return {
...state,
isAddingComment: false,
mainPosts,
commentAdded: true,
};
}
error is occured in this
const Comments = [...post.Comments, action.data.comment];
git:
https://github.com/hyunsokstar/node_bird_33
https://github.com/hyunsokstar/node_bird_33/blob/master/front/reducers/post.js
https://github.com/hyunsokstar/node_bird_33/blob/master/front/components/PostCard.js
thanks for let me know how to fix it
I guess this is because the findIndex returns you undefined for case when the ids are not matched, and which leads to something like undefined.Comments which throws you error.
case ADD_COMMENT_SUCCESS: {
const postIndex = state.mainPosts.findIndex(v => v.id === action.data.postId);
if(postIndex){
const post = state.mainPosts[postIndex];
const Comments = [...post.Comments, action.data.comment];
const mainPosts = [...state.mainPosts];
mainPosts[postIndex] = { ...post, Comments };
return {
...state,
isAddingComment: false,
mainPosts,
commentAdded: true,
};
}
else{
// Write Your logic if the index is not found
return state;
}