When I console log my values, it updates only if I submit the form the second time. Why is this happening?
const Link = (props) => {
const { state, scrape } = useContext(ScrapeContext);
const [clipboard, setClipboard] = useState();
const [googleClip, setGoogleClip] = useState(false);
const [googleLink, setGoogleLink] = useState('');
const urlFromClipboard = () => {
Clipboard.getString().then((content) => {
if (content.includes('https://www.google.com')){
setGoogleClip(true);
console.log('googleLink', googleLink);
setClipboard(content);
setGoogleLink(`${content.split('?')[0]}?__a=1`);
} else {
setGoogleClip(false);
}
});
if (googleClip) {
console.log(googleLink);
scrape({ googleLink });
}
}
useEffect(() => {
urlFromClipboard();
console.log('useEffect googleLink', googleLink);
console.log('useEffect state', state);
}, [clipboard]);
return (
<View style={styles.container}>
<View style={styles.inputFieldContainer}>
<TextInput
style={styles.inputField}
placeholder='Enter Google url'
autoCapitalize='none'
autoCorrect={false}
value={googleClip ? clipboard : ''}
/>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => {
urlFromClipboard();
}}
style={styles.touchSubmit}
>
<Text style={styles.touchText}>Submit</Text>
</TouchableOpacity>
</View>
{state.errorMessage ? (
<Text style={styles.errorMessage}>{state.errorMessage}</Text>
) : null}
</View>
);
}
What I have here is a component that will grab data from a url, and on submit it will scrape certain information the app needs, however, it will only update those console log values if I press the submit button twice.
The problem is here that you do not have access the state right after you set the state. So you actually set the state, and it is there, but you only see the updated state second time you run the console log. That does not mean that you have to submit twice but when you submit for second time you run the console.log for the second time and see the value. Because setting state functions are async.In this case, you need to use callback function to actually see the updated state on the console. Hope that helps.
Like Bora Sumer mentioned, you're trying to use the state values before they are actually updated. You can do something like this:
Clipboard.getString().then((content) => {
if (content.includes('https://www.google.com')){
let link = `${content.split('?')[0]}?__a=1`
setGoogleClip(true);
console.log('googleLink', googleLink);
setClipboard(content);
setGoogleLink(link);
console.log(link);
scrape({ googleLink: link });
} else {
setGoogleClip(false);
}
});
You can use async/await each time you setState like following:
const urlFromClipboard = () => {
Clipboard.getString().then( async (content) => {
if (content.includes('https://www.google.com')){
await setGoogleClip(true);
console.log('googleLink', googleLink);
await setClipboard(content);
await setGoogleLink(`${content.split('?')[0]}?__a=1`);
} else {
await setGoogleClip(false);
}
});
if (googleClip) {
console.log(googleLink);
scrape({ googleLink });
}
}
Related
My data in firestore is structured as shown in the pictures. In my code, I am using a map of the exercises array within my workout document like this:
{workout.exercises.map((exercise) => {
return (
<Text>Want exercise name here</Text>
)
I believe I have to use doc.data() from getDoc(exercise).then((doc) => to get the actual values, but I can't seem to figure out how to actually render the exercise name. It's driving me crazy, any help would be greatly appreciated!
This is the exercise object referenced in the exercises array from the picture above:
EDIT: If the exercises array only has one element, it works properly, but if it has >1, the data seems to keep rendering infinitely which results in flashing and changing text.
EDIT2: Here's my full component code in case that helps:
export function WorkoutDisplayScreen({ navigation }) {
const [workouts, setWorkouts] = React.useState([]);
const workoutsArray = [];
const [isFirstLoad, setIsFirstLoad] = useState(true);
const [exerciseData, setExerciseData] = useState({});
async function getData(exercise) {
await getDoc(exercise).then((doc) => {
setExerciseData(doc.data());
});
}
const getWorkouts = async () => {
console.log('Firebase READ & WRITE');
const workoutsCollection = collection(db, 'Users', auth.currentUser.uid, 'Workouts');
const workoutsDocs = await getDocs(workoutsCollection);
workoutsDocs.forEach((workout) => {
workoutsArray.push(workout.data());
});
setWorkouts(workoutsArray);
};
useEffect(() => {
console.log('Rendering...');
if (isFirstLoad) {
getWorkouts();
}
setIsFirstLoad(false);
}, []);
return (
<ScreenContainer>
<View style={styles.headerrow}>
<TouchableOpacity
onPress={() => {
navigation.goBack();
}}
>
<AntDesign name="leftcircle" size={24} color="black" style={styles.headericon} />
</TouchableOpacity>
<Text style={styles.header}>My Workouts</Text>
</View>
{workouts &&
workouts.map((workout) => {
return (
<View key={workout.id}>
<View style={styles.workoutnamecontainer}>
<Text style={styles.workoutnametext}>{workout.name}</Text>
</View>
{workout.exercises.map((exercise, index) => {
getData(exercise);
return (
<View style={styles.exercisecontainer} key={index}>
<Text style={styles.exercisetext}>{exerciseData.name}</Text>
<Text style={styles.exercisetext}>{exerciseData.type}</Text>
<Text style={styles.exercisetext}>{exerciseData.weight}</Text>
<Text style={styles.exercisetext}>{exerciseData.reps}</Text>
</View>
);
})}
</View>
);
})}
</ScreenContainer>
);
}
EDIT3:
I can now log the data in the correct format with, but trying to render it on screen is still not working correctly.
const getWorkouts = async () => {
console.log('Firebase READ & WRITE');
const workoutsCollection = collection(db, 'Users', auth.currentUser.uid, 'Workouts');
const workoutsSnapshot = await getDocs(workoutsCollection);
let workoutsDocs = workoutsSnapshot.docs;
workoutsDocs.forEach((workout) => {
workoutsArray.push(workout.data());
});
setWorkouts(workoutsArray);
workouts.map((workout) => {
workout.exercises.forEach((exercise) => {
getDoc(exercise).then((doc) => {
console.log(workout.name + ':');
console.log(doc.data());
});
});
});
};
I believe you should do all the data-fetching i.e. for all the workouts and every exercise in each workout in the useEffect itself. I have never seen code where data fetching is done inside the JSX part of the function. I am highly skeptical about it.
Also, one thing I noticed while looking through your code is that you are iterating over the snapshot instead of docs in the the snapshot inside your getWorkouts() function. It should be as follows:
const getWorkouts = async () => {
console.log('Firebase READ & WRITE');
const workoutsCollection = collection(db, 'Users', auth.currentUser.uid, 'Workouts');
const workoutsSnapshot = await getDocs(workoutsCollection);
workoutsDocs = workoutsSnapshot.docs; // This line must be added to your code
workoutsDocs.forEach((workout) => {
workoutsArray.push(workout.data());
});
setWorkouts(workoutsArray);
};
I have 3 screens and I can navigate between them. The first one is "Reiew Screen" where the user can put a raiting, write a title and description of their review. The second one (most problematic for me) is the media screen where the user can select multiple photos to support their review. The third screen is "Review screen" where the user can again double check and edit their review (if they need to).
On the review screen I see the photos the user has selected and if I want I can remove some of them. If I want, I also can edit the title and the description of the review.
Editing the photos and keeping the edit consistent with the "Media Screen" is done using refs. I am using ImageBrowser from here so that I can keep consistent state between MediaScreen and ReviewScreen when the user deletes the photos. The problem is when I want to edit the title and the description. If I want to edit title.description I need to naigate from Reiew page to Rate page (because Rate page contains the title and the description). When I press "done" I need to navigate back to Review page where I see the updated title and the updated description as well as the photos which I have selected on the previous steps. When I navigate from Rate page to Review page I have error that the reference of ImageBrowser I have created is null. I tried passing this reference between the screens, as a property but for some reason it seems I am passing undefined.
I am thinking maybe the refs object which I have created have life span and it is expired?
I am posting the pages and how I navigate between them:
Rate Screen
const RateScreen = (props) => {
const { place } = props.route.params;
//imageBrowser is the object which I try to retrieve from the Review page, but it comes as undefined
const { finalObject, imageBrowser } = props.route.params;
console.log("RATE SCREEN IS BEING RERENDERED: ", props.route.params);
const [rating, setRating] = useState(0);
const [title, setTitle] = useState(null);
const [description, setDescription] = useState(null);
// again trying to retrieve the refs
const [gallery, setGallery] = useState(props.route.params.imageBrowser);
function ratingCompleted(value) {
// not relevant
}
function updateTitle(value) {
//not relevant
}
function updateDescription(value) {
//not relevant
}
useEffect(() => {
// way to fetch some value for imageBrowser but it is still null
console.log("useeffect for image browser is being rendered");
if (imageBrowser) {
setGallery(imageBrowser);
}
}, [imageBrowser]);
function navigate() {
if (finalObject) {
//in the case I have edited the object I navigate back to Review Screen
props.navigation.navigate("Review Screen", {
finalObject: {
...finalObject,
rating: rating,
title: title,
description: description,
},
// it comes as null so my code throws an exception
imageBrowser: gallery,
});
} else {
// In the case I have just created a review I am just navigating to the next step which is Add Media screen
props.navigation.navigate("Add Media", {
rateObject: { ...rateObject, place: place },
});
}
}
useLayoutEffect(() => {
props.navigation.setOptions({
headerRight: () => navigate()
),
});
}, [rating, title, description]);
return (
<View>
<TextInput
value={title}
onChangeText={(value) => updateTitle(value)}
/>
<TextInput
value={description}
onChangeText={(value) => updateDescription(value)}
/>
</View>
);
};
export default RateScreen;
Part of my Add Media Screen where I create the refs, and I pass it to the Review Page:
const GalleryScreen = (props) => {
const { selected, setPhotos, setImageBrowser } = props.route.params;
const [newSelected, setNewSelected] = useState(selected);
//using refs
const imageBrowserRef = useRef(null);
useEffect(() => {
setNewSelected(selected);
}, []);
useEffect(() => {
if (imageBrowserRef) {
setImageBrowser(imageBrowserRef);
}
}, [imageBrowserRef]);
const renderSelectedComponent = (number) => {
return (
//not related
);
};
return (
<View style={styles.viewStyle}>
<ImageBrowser
// creating the ref
ref={imageBrowserRef}
max={10}
callback={(promise) => {
//not related
}}
renderSelectedComponent={renderSelectedComponent}
/>
</View>
);
};
useLayoutEffect(() => {
props.navigation.setOptions({
headerRight: () => (
<TouchableOpacity
onPress={() => {
props.navigation.navigate("Review Screen", {
finalObject: {
...rateObject,
photos: photos,
},
// passing the refs, which for this step works fine
imageBrowser: imageBrowserRef,
});
}}
>
<AntDesign name="check" size={24} color="white" />
</TouchableOpacity>
</View>
),
});
Finally my "Review Page":
import {
renderTitle,
renderRating,
renderDescription,
renderMedia,
} from "./renderItems";
const ReviewScreen = (props) => {
//at this step imageBrowser is not null and my interactions with the browser are as expected
const { finalObject, imageBrowser } = props.route.params;
const { navigation } = props;
const [editedObject, setEditedObject] = useState(finalObject);
const [rating, setRating] = useState(finalObject.rating);
function ratingCompleted(value) {
//not relevant
}
function removePhoto(item) {
//again as I expect, the removed photo is removed from BOTH screens (Media screen and Review screen)
let index = imageBrowser.current.state.photos.indexOf(item);
let updatedPhotos = editedObject.photos.filter(function (photo) {
return photo != item;
});
imageBrowser.current.selectImage(index);
setEditedObject({
...editedObject,
photos: updatedPhotos,
});
}
useLayoutEffect(() => {
//doesnt matter
),
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => {
// if I go back to Add Media screen, thanks to refs both screens are consistent
navigation.navigate("Add Media", {
rateObject: editedObject,
});
}}
/>
),
});
}, [editedObject]);
return (
<View>
{renderRating(editedObject, ratingCompleted)}
// with render title I am trying to pass imageBrowser refs as a property but it doesnt work
{renderTitle(
{ ...editedObject, rating: rating },
imageBrowser,
props.navigation
)}
//similar with render description
{renderDescription(
{ ...editedObject, rating: rating },
imageBrowser,
props.navigation
)}
//render media does not navigate to anywhere, it simply displays the photos
{renderMedia(editedObject, removePhoto)}
</View>
);
};
My renderTitle mthod:
export const renderTitle = (finalObject, imageBrowser, navigation) => {
return (
<SafeAreaView style={{ flexDirection: "row", height: 60 }}>
<ScrollView style={{ marginHorizontal: 10, marginTop: 10 }}>
<Text style={styles.titleStyle}>{finalObject.title}</Text>
</ScrollView>
<TouchableOpacity
onPress={() => {
make sure imageBrowser is not null and it is not
console.log("trying to edit title: ", imageBrowser.current.props);
//again on this page I see that imageBrowser is not null, but passing it to the "Rate page" somehow magically it is null
navigation.navigate("Rate Your Visit", {
finalObject: finalObject,
imageBrowser: imageBrowser,
});
}}
>
<MaterialIcons name="edit" size={24} color="#0696d4" />
</TouchableOpacity>
</SafeAreaView>
);
};
Any ideas are welcome
I try to save the tasks in my ToDo app with AsyncStorage so that they can be retrieved after an app restart.
So far I have managed to save the tasks. However, an empty array is always saved in the first run. If I want to create a new task, it only saves it the second time I click the button. Logical if the whole thing runs asynchronously. I just can't figure out where my fault is. I would be very happy to receive help and tips.
Here you can see the empty array when creating the first task:
Reactotron Empty Array
And here you can see the first value get's saved after i created the second task:
Reactotron AsyncStorage after second click
First Part:
if (__DEV__) {
import('./ReactotronConfig').then(() => console.log('Reactotron Configured'));
}
import Reactotron, { asyncStorage } from 'reactotron-react-native';
import React, { useState, useEffect } from 'react';
import {
Keyboard,
KeyboardAvoidingView,
Platform,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
ScrollView,
Image,
SafeAreaView,
} from 'react-native';
import AsyncStorage from '#react-native-async-storage/async-storage';
import Task from './components/Task';
export default function App() {
const [task, setTask] = useState();
const [taskItems, setTaskItems] = useState([]);
const getData = async () => {
try {
const jsonValue = await AsyncStorage.getItem('TASKS');
const jsonValue2 = JSON.parse(jsonValue);
if (jsonValue2 !== null) {
setTaskItems(jsonValue2);
}
} catch (e) {
alert(e);
}
};
const storeData = async () => {
await AsyncStorage.clear();
try {
const jsonValue = await AsyncStorage.setItem(
'TASKS',
JSON.stringify(taskItems)
);
return jsonValue;
Reactotron.log(jsonValue);
} catch (e) {
alert(e);
}
};
useEffect(() => {
getData();
}, []);
const handleAddTask = () => {
storeData();
Keyboard.dismiss();
setTaskItems([...taskItems, task]);
setTask(null);
};
const completeTask = (index) => {
let itemsCopy = [...taskItems];
itemsCopy.splice(index, 1);
setTaskItems(itemsCopy);
};
const bearyDustLogo = require('./assets/bearydust-logo-bear-with-text.png');
Second Part:
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
{/* Aufgaben für heute */}
<View style={styles.tasksWrapper}>
<View style={styles.headerWrapper}>
<Text style={styles.sectionTitle}>StandUp Aufgaben</Text>
<Image style={styles.tinyLogo} source={bearyDustLogo}></Image>
</View>
<View style={styles.items}>
{/* Aufgabenbereich */}
{taskItems.map((item, index) => {
return (
<TouchableOpacity
key={index}
onPress={() => completeTask(index)}
>
<Task text={item} />
</TouchableOpacity>
);
})}
</View>
</View>
</ScrollView>
{/* Aufgabe erstellen */}
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.writeTaskWrapper}
>
<TextInput
style={styles.input}
placeholder={'Ey! Lass was machen'}
value={task}
onChangeText={(text) => setTask(text)}
/>
<TouchableOpacity
onPress={() => {
handleAddTask();
}}
>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
Looking at the code, it's first saving and then it's updating the array, so you will always be one step behind on your storage:
const handleAddTask = () => {
storeData(); // here you are handling the save
Keyboard.dismiss();
setTaskItems([...taskItems, task]); // but you update the values only here
setTask(null);
};
To keep your code simple I would suggest you to save each time you have an update on your taskItems but keep in mind you don't need to update the first time you load from storage, so something like this should work:
export default function App() {
const [task, setTask] = useState();
const [taskItems, setTaskItems] = useState([]);
const [loading, setLoading] = useState(true);
const getData = async () => {
try {
const jsonValue = await AsyncStorage.getItem('TASKS');
const jsonValue2 = JSON.parse(jsonValue);
if (jsonValue2 !== null) {
setTaskItems(jsonValue2);
}
} catch (e) {
alert(e);
} finally {
setLoading(false)
}
};
const storeData = async () => {
// commenting this line as you don't need to clean the storage each time you write something on it, as you'll just override the existing key 'TASKS'
// await AsyncStorage.clear();
// here you validate if the data was loaded already before starting watching for changes on the list
if (!loading) {
try {
const jsonValue = await AsyncStorage.setItem(
'TASKS',
JSON.stringify(taskItems)
);
return jsonValue;
Reactotron.log(jsonValue);
} catch (e) {
alert(e);
}
}
}
useEffect(() => {
getData();
}, []);
useEffect(() => {
storeData()
}, [taskItems])
const handleAddTask = () => {
// won't need this line anymore as now everything you update your list it will be saved.
// storeData();
Keyboard.dismiss();
setTaskItems([...taskItems, task]);
setTask(null);
};
const completeTask = (index) => {
let itemsCopy = [...taskItems];
itemsCopy.splice(index, 1);
// this will trigger a save as well
setTaskItems(itemsCopy);
};
const bearyDustLogo = require('./assets/bearydust-logo-bear-with-text.png');
This way you will always save any updates on the task list and will prevent to save then as empty when first rendering your component.
Success on your project.
Am I doing something wrong here? I'm trying to get some data, but its returning errors in my console log, saying something about rerendering
mycompontent:
const Link = (props) => {
const { state, scrape } = useContext(ScrapeContext);
const [clipboard, setClipboard] = useState('');
const [googleClip, setGoogleClip] = useState(false);
const [googleLink, setGoogleLink] = useState('');
const urlFromClipboard = () => {
Clipboard.getString().then((content) => {
if (content.includes('https://www.google.com')){
console.log('inside includes');
setGoogleClip(true);
setClipboard(content);
setGoogleLink(`${content.split('?')[0]}?somedata`);
} else {
setGoogleClip(false);
}
});
if (googleClip) {
scrape({ googleLink });
}
}
useEffect(() => {
urlFromClipboard();
}, [clipboard]);
return (
<View style={styles.container}>
<View style={styles.inputFieldContainer}>
<TextInput
style={styles.inputField}
placeholder='Enter Google url'
autoCapitalize='none'
autoCorrect={false}
value={googleClip ? clipboard : ''}
/>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => {
urlFromClipboard();
}}
style={styles.touchSubmit}
>
<Text style={styles.touchText}>Submit</Text>
</TouchableOpacity>
</View>
{state.errorMessage ? (
<Text style={styles.errorMessage}>{state.errorMessage}</Text>
) : null}
</View>
);
}
scrape context file:
const scrape = (dispatch) => {
console.log('dispatch scrape', dispatch)
return async ({googleLink}) => {
console.log('scrape googleLink',googleLink);
try {
const response = await googleApi.post('/googleLink', {googleLink});
dispatch({ type: 'googleLink', payload: response });
navigate('NewPage');
} catch (error) {
dispatch({
type: 'googleLink_error',
payload: 'Please submit correct Google link.'
})
}
}
}
I got the data in my backend to respond correctly, but it's failing to finish what its intended, on the frontend side. The console.log('dispatch scrape', dispatch) is giving me an error in my console:
dispatch scrape function dispatchAction(fiber, queue, action) {
(function () {
if (!(numberOfReRenders < RE_RENDER_LIMIT)) {
throw ReactError(Error("Too many re-renders. React limits the number …
It doesn't produce the entire error until I hover over it... saying more inline about "to prevent infinite loop..." Here's the screenshot:
it looks like every render is setting clipboard to a new value, triggering useEffect in each new render, thus causing an infinite loop. I'm new to react native, and have been suffering a lot from infinite loop myself. Not sure it helps to change the useEffect's dependency to the function urlFromClipboard, and wrap urlFromClipboard in a callback function, of course set clipboard as dependency of the callback function:
const urlFromClipboard = useCallback(() => {
Clipboard.getString().then((content) => {
if (content.includes('https://www.google.com')) {
console.log('inside includes');
setGoogleClip(true);
setClipboard(content);
setGoogleLink(`${content.split('?')[0]}?somedata`);
} else {
setGoogleClip(false);
}
});
if (googleClip) {
scrape({ googleLink });
}
}, [clipboard])
useEffect(() => {
urlFromClipboard();
}, [urlFromClipBoard]);
I'm using react navigation bottom tab and when I have data stored in my AsyncStorage, the data comes out to be empty when I go into this SavedData component. In the console, if I showAsyncStorageContentInDev(), it shows that I do indeed have the key #storage_key. But when I console log out the data, its always empty. Does it have to do with something with react navigation bottom tab that empty's out the data?
Or how do I view the data when user tabs into this component?
const SavedData = (props) => {
const [getData, setData] = useState([]);
const getKeyInfo = async () => {
try {
const storedData = await AsyncStorage.getItem('#storage_Key');
setData(JSON.parse(storedData))
console.log('saved',getData);
} catch (e) {
// saving error
}
console.log(getData);
};
useEffect(() => {
console.log(getData);
getKeyInfo();
}, []);
return (
<View>
<Text>
{getData.map((i, index) => (
<View key={i.id.toString()}>
<Data uri={i.uri} />
</View>
))}
;
</Text>
</View>
);
};
export default SavedExercise;
Have you ever try pass getData into the second argument of useEffect to notify for Component re-render when state change:
useEffect(() => {
console.log(getData);
getKeyInfo();
}, [getData]); // Here