Morning/Evening everybody
So I'm tryna get restaurants from yelpApi(react native App), but the fetch is not working.
First I'm getting a message as what "businesses" isn't a resolved variable, and the response from my getRestaurantsFromYelp() function is getting ignored, don't know why. If anybody could hep me fix that.
const [restaurantsData, setRestaurantsData] = useState(localRestaurants);
const getRestaurantsFromYelp = () => {
const yelpUrl = "api.yelp.com/v3/businesses/search?term=restaurants&location=US"
const apiOptions = {
headers : {
Authorization : `Bearer ${YELP_API_KEY}`,
}
}
return fetch(yelpUrl, apiOptions).then((res) => res.json()).then((json) => setRestaurantsData(json.businesses)); //message => unresolved variable businesses
};
useEffect(() =>{
getRestaurantsFromYelp(); // message => promise returned from getRestaurantsFromYelp is ignored
}, [])
Related
We are making a quiz app in which the user solves the question and we store the option selected by him in asyncStorage, then on the next screen store this data in useState, then there it is validated that the user's answer is correct. or wrong.
Before that, we add the key and value present in the state to the json file being fetched, at that time if there is no key and value in the state, then the following error comes, we want to leave this error and continue the function. have a call and If you have a better way to solve this problem, please share
evalutionmode.js
const [salectedOption, setSalectedOption] = useState()
AsyncStorage.getAllKeys((err, keys) => {
AsyncStorage.multiGet(keys, (err, stores) => {
let allvalue = []
stores.map((result, i, store) => {
// get at each store's key/value so you can work with it
let key = store[i][0];
let values = store[i][1];
allvalue.push({key,values})
console.log(key)
});
setSalectedOption(allvalue)
});
});
QuizResult.js
const QuizResult = ({ nevigation, route }) => {
const [allselectedOption, setAllselectedOption] = useState(route.params.selectedOP)
useEffect(() => {
QuestionApi();
let SortData = allselectedOption.sort(function (a, b) {
return a.key - b.key;
});
setAllselectedOption(SortData);
}, [1])
const QuestionApi = async () => {
const response = await fetch('api.php?table=demo');
const data = await response.json();
setAllQuestion(data);
try {
const result = data?.map((item) =>({
...item,
selectedOP: allselectedOption[item.Quetion_Number].key !== undefined ?
allselectedOption[item.Quetion_Number].values == item.correct_option :
allselectedOption[item.Quetion_Number].values
}
))
console.log(result)
} catch (e) {
console.log(e)
}}
error
LOG [TypeError: Cannot read property 'key' of undefined]
Add an optional chaining in the try block of QuizResult.js
selectedOP: allselectedOption[item.Quetion_Number]?.key !== undefined ? allselectedOption[item.Quetion_Number]?.values == item.correct_option : allselectedOption[item.Quetion_Number]?.values
or a simple single if condition
if(allselectedOption[item.Quetion_Number]){
selectedOP: allselectedOption[item.Quetion_Number].key !== undefined ?
allselectedOption[item.Quetion_Number].values ==
item.correct_option :
allselectedOption[item.Quetion_Number].values
}
Im working with my friends on a app project and we find an issue many times when we tring to set a use state and the console log the variable, i've looking for a solution in the website and saw that the reason is that the usestate is an async awiat which means the variable that i set in the use state isn't immidatly set in it, so i tried many solution that i found in the websites but none of them work for me.
in the screenShot you can see that the json variable is in console log before and the set varaible doesn't show after the setActiveUser , any help?
Thanks!
If you want to do something upon setting state then your best bet is to use the useEffect hook from React and adding your state in the dependency array. This will then call the function in your useEffect every time the state changes. See below a rough example:
import { Text } from 'react-native';
const MyComponent = () => {
const [activeUser, setActiveUser] = useState(null);
useEffect(() => {
// This should log every time activeUser changes
console.log({ activeUser });
}, [activeUser]);
const fetchAuthentication = async user => {
var flag = false;
await fetch('/api/authUser/', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(user),
})
.then(res => {
res.ok && (flag = true);
return res.json();
})
.then(json => {
if (flag) {
setActiveUser(json);
}
})
.catch(error => console.error(error));
return flag;
};
return <Text>Hi</Text>;
};
Full documentation: https://reactjs.org/docs/hooks-effect.html
I have built an application in react native, and am now going through the process of updating some old test suites. The test running an error is a component test using react test renderer to simulate the functionality of the screen.
Error Summary: One of the expect statements is throwing an error saying
Cannot read property 'call' of undefined
When the value exists and I can print out the property call like so
console.log(store.dispatch.mock.calls[6][0]);
and it gives me the expected value.
CODE:
//Imports
jest.spyOn(Date, "now").mockImplementation(() => 1479427200000);
const mockStore = configureStore([]);
describe("block1", () => {
it("test1", async done => {
try {
let component;
let store = mockStore(stores.SummaryR1);
store.dispatch = await jest.fn();
const mockDate = new Date(1466424490000);
const spy = jest.spyOn(global, "Date").mockImplementation(() => mockDate);
Date.now = jest.fn(() => 1466424490000);
await act(async () => {
component = await renderer.create(
<PaperProvider>
<Provider store={store}>
<Receive_Signature />
</Provider>
</PaperProvider>
);
});
const expected = await component.toJSON();
expect(expected).toMatchSnapshot();
await act(async () => {
//action
});
await act(async () => {
//action
});
await act(async () => {
//action
});
await act(async () => {
//action
});
await act(async () => {
//action
});
expect(store.dispatch).toHaveBeenCalledTimes(8);
expect(store.dispatch).toHaveBeenNthCalledWith(1, {results1});
expect(store.dispatch).toHaveBeenNthCalledWith(2, {results2});
expect(store.dispatch).toHaveBeenNthCalledWith(3, {results3});
expect(store.dispatch).toHaveBeenNthCalledWith(4, {results4});
expect(store.dispatch).toHaveBeenNthCalledWith(5, {results5});
expect(store.dispatch).toHaveBeenNthCalledWith(6, {results6});
expect(store.dispatch).toHaveBeenNthCalledWith(7, {results7} );
expect(store.dispatch).toHaveBeenNthCalledWith(8, {results8});
expect(navigateToScreen).toHaveBeenCalledTimes(1);
expect(navigateToScreen.mock.calls[0][0]).toEqual("Processor_Dashboard");
done();
} catch (error) {
done.fail(error);
}
}, 15000);
The error is forming on testing results7 on the 7th call.
Firstly I know there are 8 calls because of
expect(store.dispatch).toHaveBeenCalledTimes(8);
I can then also print out results7, and see that I have the correct data for results7. But when I run it in the jest expect statement I get the error:
Cannot read property 'call' of undefined
I have no idea why there is this error since all the other expects run, and if I comment out just the one statement the rest of the suite runs fine as well. For some reason it is only erroring out on the one expect statement.
Obviously the data has been removed, but does not affect how it would run.
In here, I can both graphQLErrors and networkError:
const errorLink = onError(({ operation, graphQLErrors, networkError, forward }) => {
if (process.env.NODE_ENV !== 'production') {
if (networkError) {
console.log(`[Network Error]:`, networkError.message);
}
if (graphQLErrors) {
graphQLErrors.forEach((error) => {
console.log(`[GraphQL Error]:`, error.message);
});
}
}
});
but when trying to get these errors inside useQuery, at the component level, only networkError is returned while graphQLErrors is an empty array:
let { loading, error, data } = useQuery(GET_ALL_PROJECTS, {
variables: { pageNum: 1, pageSize: 10 },
fetchPolicy: 'network-only',
});
For example, I get an error 403 to onError function from backend, but could not handle this error inside useQuery!
How to fix this issue??
Apollo client passes either graphQLErrors or networkError forward, that's true. I believe it's under an assumption that when the network error happens, the GraphQL error in returned data is more technical and shouldn't be shown to the user. If you really want to access the additional error info sent by your server, you can actually access it in networkError.result.errors.
My code in typescript extracting the error:
const { networkError } = error
const networkGraphQLErrorsPresent =
networkError &&
"result" in networkError &&
networkError.result.errors &&
networkError.result.errors.length > 0
const extractedError =
networkGraphQLErrorsPresent ?
(networkError.result.errors[0] as GraphQLError) :
undefined
I am new to ES6 and react-native, trying to get multiple values from the SecureStore.
I think I am misunderstanding promises here ... global.userData is empty in the Promise.all(promises).then function. The relevant values do exist in the secure store
My code is:-
getUserData(fields) {
var promises = [];
var that = this;
global.userData = {};
function getField(field) {
return SecureStore.getItemAsync(field)
.then(res => {
console.log(field+"="+res); // this appears after the log below
global.userData[field] = res;
})
.catch(error => {
global.userData[field] = null;
});
}
fields.map(field => {
promises.push[getField(field)];
});
Promise.all(promises).then(function(v) {
console.log(global.userData); // this is empty
that.setState({ isReady: true }); // allow page to render
});
}
getUserData(["userId", "userName","etc"]);
My bad ... inadvertantly used
promises.push[getField(field)];
should have been:
promises.push(getField(field));
Suprised it wasn't detected as a syntax error ...