首先使用 axios fetch post 延迟反应本机

Question

我正在使用本机反应和 axios。我有两个部分。

在div中用useEffect渲染的练习列表。在里面，有一个输入表单，一旦按下 Add set 按钮，集合就会被添加到数据库中，并使用传递的函数再次获取练习。
主要问题是，当我第一次添加练习时，练习没有渲染。我必须返回并在页面中再次出现以呈现第一个。完成这个过程后，我可以添加尽可能多的练习......并且删除是一样的。我可以删除任何练习，但是当删除最后一个练习时，它仍然存在，我必须离开页面才能看到更改...

这是添加练习的功能。一旦按下警报按钮，它就会执行

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);
        }
    }

波纹管是在数组状态上添加映射的组件

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

Bellow 是从数据库中获取数据并将状态设置为能够在上面的组件中呈现的函数

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();
    }, []);

Answer 1

获取成功后也需要切换错误值

为此更新代码

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);
    }
}

首先使用 axios fetch post 延迟反应本机

React native with axios fetch first post delayed

react-native

axios