I am calling the getSource method inside a load event like so:
map.on('load', () => {
map.addSource("country-boundary-source", {
type: "vector",
url: "mapbox://mapbox.country-boundaries-v1"
});
const source = map.getSource("country-boundary-source");
console.log("Source:", source);
})
In the output, the object has fields such as vectorLayers and vectorLayerIds. However when I call these values using source.vectorLayers I get an undefined value returned to me. I'm not really sure why this would be happening, since it is being outputted.
Related
I have what I thought was a simple validation using oneOf that isn't working for me with yup:
const schema = Yup.mixed()
.oneOf([
{
error: `EmailOrPasswordInvalid`,
},
{},
])
.required();
... later...
const isValid = schema.isValidSync({ error: `EmailOrPasswordInvalid` });
console.log(isValid); // false
I'm sure I'm missing something simple but can't put my finger on it. Thanks!
I believe you may have misunderstood how the oneOf function works.
Here is an example pulled from a Grepper post (credit to Fustinato):
// mixed.oneOf(arrayOfValues: Array<any>, message?: string | function): Schema Alias: equals
// Whitelist a set of values. Values added are automatically removed from any blacklist if they are in it. The ${values} interpolation can be used in the message argument.
// Note that undefined does not fail this validator, even when undefined is not included in arrayOfValues. If you don't want undefined to be a valid value, you can use mixed.required.
let schema = yup.mixed().oneOf(['jimmy', 42]);
await schema.isValid(42); // => true
await schema.isValid('jimmy'); // => true
await schema.isValid(new Date()); // => false
Edit:
In further response and lookup, it seems as though what you are trying to do may not be possible? Src: https://github.com/jquense/yup/issues/1393
Would it be possible for you to just de-structure your error and pass it through as the String and then check for that String in the oneOf function?
I am upgrading a React app from react-query v3 to #tanstack/react-query v4.
Almost everything works, but I'm having a problem with Suspense.
I have a react component:
const WrapperPageEdit: React.FC<MyProps> = ({
pageUuid,
redirect,
}: MyProps) => {
const FormPage = React.lazy(() => import('./FormPage'));
const { data } = usePageView(pageUuid);
if (data?.[0]) {
const pageObjectToEdit= data[0];
const content = pageObjectToEdit.myStuff.content;
return (
<Suspense
fallback={<Trans id="loading.editor">Loading the editor...</Trans>}
>
<FormPage
id={uuid}
content={content}
redirect={redirect}
/>
</Suspense>
);
}
return <p>No data.</p>;
};
And here's my query:
export function usePageView(
uuid: string,
): UseQueryResult<DrupalPage[], Error> {
return useQuery<DrupalPage[], Error>(
queryKeyUsePageView(uuid),
async () => {
return fetchAnon(getPageByPageUuid(uuid));
},
{
cacheTime: YEAR_MILLISECONDS,
staleTime: YEAR_MILLISECONDS,
onSuccess: (data) => {
if (data?.[0]) {
data.map((element) => processResult(element));
}
},
},
);
}
This works in v3 but fails in v4 with the following error:
TypeError: Cannot read properties of undefined (reading 'content')
The reason the property is undefined is because that property is set by the processing in onSuccess (data.map).
The issue appears to be that in v4, the component WrapperPageEdit is refreshed before onSuccess in the usePageView query has finished processing, whereas in v3, the component WrapperPageEdit is not refreshed until the onSuccess data.map is complete.
How can I correctly fix this? I can write some additional code to try to check whether the onSuccess data.map is complete, but since react-query handled this automatically in v3, I'd like to rewrite my code in v4 so that it is the same.
The problem is likely that you are mutating the data in onSuccess. Directly modifying data in callbacks is not a good idea. Instead, do your transformation for example directly in the queryFn:
async () => {
const data = fetchAnon(getPageByPageUuid(uuid));
if (data?.[0]) {
data.map((element) => processResult(element));
}
return data
},
other good places to do data transformation is e.g. the select option, but it should always happen in an immutable way, because otherwise, you are overwriting the cached data inadvertently. React prefers updates to be immutable.
I trying react-query for data-fetching (in Typescipt)
in my books, maybe I guess use react-query V3.
but I want to react-query v4
in my books, using react-query...
const useLatestMovie = () => {
return useQuery<AxiosResponse<MovieDetail>, AxiosError>('latestMovie', latestApi)
}
and call function other files,
const { isLoading, data } = useLatestMovie()
but this code isLiading, data not exist
because "Property 'data' does not exist on type 'Promise'."
how do I make this code can work?
You can type your query functions by just specifying the type with the http request.
In the example below we typed the get request with an array of Users. Because the data is typed and returned in the useQuery hook, typescript will implicitly know the type.
async function fetchUsers() {
const { data } = await http.get<User[]>('/users');
return data;
}
export function useUsers() {
return useQuery(['users'], () => fetchUsers());
}
When we use the useUsers hook in our application, the users variable will be of type Users[]
const { data: users } = useUsers();
I try 2 answer..
using query array...
return useQuery<AxiosResponse, AxiosError>(['latestMovie'], latestApi)
type select
return useQuery<MovieDetail, Error>(['latestMovie'], latestApi)
I am using cucumber 3 with protractor 5.2.2. and i have given the url in my config file as baseUrl: 'https://www.linkedin.com' and i have to check whether navigated to the home page after clicking login.Instead of passing URL "https://www.linkedin.com/feed" ,i have pass "feed" and given split method in my step.js file.
my feature file is given below
When I enter "qwerty" in ".username"
And I enter "Passw0rd" in ".password"
And I click on ".login"
Then I should be at the "feed"
and in my step.js
Then(/^I should be at the "(.*)"$/, function (url) {
var geturl=browser.getCurrentUrl() + '';
var res=geturl.split("/");
var result=res[1];
return expect(result).to.eventually.equal(url);
});
My fourth step failed and getting error "TypeError: Cannot read property 'then' of undefined".where i am going wrong in my step.js file.Or how can i check the remaining part of base url when i am on inner page which having a url format of "base.com/feed/profile/profile-edit".Thanks in advance.
Explain your code issue inline at below.
Then(/^I should be at the "(.*)"$/, function (url) {
var geturl=browser.getCurrentUrl() + '';
// browser.getCurrentUrl() return a pomise which it's also a javascript object
// in javascript claculate `an object + ''`, will convert the object
// to string firstly by toString() function,
// if the object not overwrite the supper toString() function,
// it will return an string "[object Object]"
// So geturl = "[object Object]"
var res=geturl.split("/");
// there is no "/" in geturl, so the array length of res is 1
var result=res[1];
// res[1] exceed array length, so result = undefined
return expect(result).to.eventually.equal(url);
// because you used eventually at here, so chai will regard result is a promise,
// chai will check the argument of expect(xxx) is a promise or not
// by detect xxx has property: then via calling xxx.then in chai's inside code,
// but result is undefined, of course has no property: 'then'.
});
You have to consume promise eventual value in then()
Then(/^I should be at the "(.*)"$/, function (url) {
return browser.getCurrentUrl().then(function(cururl){
var parts = cururl.split("/");
return expect(parts[parts.length-1]).to.equal(url);
// dont't use eventually at here, because parts[parts.length-1] is not promise
});
});
The error in firefox browser as follows: TypeError: r is undefined
This is the chrome browser:
Uncaught TypeError: Cannot read property 'data' of undefined
I also did a video for a better understanding.
The error occurs when I changed the values in a field
jsfiddle code
youtube video
button code update
save: function (e) {
var that = this;
$.ajax({
url: '/api/apdevice',
type: e.model.id == null ? 'POST' : 'PUT',
contentType: 'application/json',
data: JSON.stringify(e.model),
success: function (data) {
alert('yes');
that.refresh();
},
error: function (data) {
alert('no');
that.cancelRow();
}
});
}
The reason for this is because your datasource's update method is being called. It has not been set which gives you the TypeError.
You can do one of two things.
Set the update method of your datasource to contain the logic contained in your save function. You'll need to set update as a function in order to be able to control the method dynamically (POST/PUT). You should remove the ajax code from the save event at this point.
Set the update method to a dummy function and handle it as part of the save event instead.
Here's an example of approach #2.
var dataSource = new kendo.data.DataSource({
..
update: function(e) { return true; }
..
});
Keep the save event function as is.
Note that I'm getting an Uncaught SyntaxError: Unexpected number error. I believe this is originating from the LastClientsCount property.
Fiddle: http://jsfiddle.net/mSRUe/23/