I am using react native, and axios. I have two parts.

1. The exercice list that is rendered with useEffect in a div. Inside, there is a Input form which once pressed the Add set button, the set is added to the database and the exercices are fetched again with the passed function.

2. The main problem is that when I first add an exercice, the exercice s not rendering. I must go back and come again in the page to render the first one. after doing this process I can add as many exercices... And with delete is same. I can delete any exercice but when deleting the last one, it persist and I must leave the page to see the changes...

THIS IS THE FUNCTION THAT ADD THE exercices. It executes once the alert button is pressed

const NewExercice = ({dayID, getAllEx}) => {

    // States and ontext change functions
    const [exName, setexName] = useState('');
    const [comment, setcomment] = useState('');
    const handleExname = text => setexName(text);
    const handleComments = text => setcomment(text);

    // Add new exercices
    const handleNewExercice = async () => {
        try 
        {
            const status = await data.post('/api/create-exercice', {dayID, exName, comments: comment});
            Alert.alert(
                'Exercice created',
                'Please add new sets to existing exercices', 
                [
                    {
                        text: 'Ok!',
                        // Fetch again for all the exercices
                        onPress: getAllEx
                    }
                ]
            )
        } 
        
        catch (error) 
        {
            console.log(error);
        }
    }

Bellow is the component that adds map over the array state

<View>
                {error ? (<Text>No exercices created yet.</Text>) : 
                exArray.map(obj => (
                    <ExerciceWrapper getAllEx={getAllExercices} navigation={navigation} key={obj.exID} object={obj} />
                ))}
            </View>

Bellow is the function that fetch the data from the DB and set the state to be able to be rendered in the component above

const getAllExercices = async () => {
        try 
        {
            const response = await data.get('/api/get-all-ex/'   dayID);
            setExArray(response.data);
        } 
        
        catch (error) 
        {
            if (error.response.status === 404) return setError(true);
            else return console.log(error);
        }
    }

    useEffect(() => {
        getAllExercices();
    }, []);

CodePudding user response：

You need to toggle the error value when you have successful fetch as well

update code to this

const getAllExercices = async () => {
    try 
    {
        const response = await data.get('/api/get-all-ex/'   dayID);
        setExArray(response.data);
        setError(response.data.length < 1)
    } 
    
    catch (error) 
    {
        if (error.response.status === 404) return setError(true);
        else return console.log(error);
    }
}