Question

我正在努力解决一个很直接的问题，但是我看不出我需要如何将各个部分组合在一起。我有PHP背景，但是我正在React Native中编写一个应用程序，对此我还很陌生，因此可以解释为什么我找不到解决方案。

我想要的是以下内容：

用户打开一个详细信息页面，该页面的标题显示一些元数据。这些数据是从API实时获取的。在此元数据下方，显示了一些操作按钮，用户可以按下这些按钮。
按下按钮时，项目状态会更新，元数据也应相应更新
根据新状态，可能需要删除或添加一些按钮，因为新状态可能会引入新操作

基于一些教程，我创建了一个“ fetchPermit”（我们在此应用程序中讨论的是许可证），它使用UseEffect钩子获取许可证并返回许可证本身

PermitScreen.js

function Permit({route, navigation}) {
    const {permit, loading} = fetchPermit(route.params.id);

fetchPermit.js

export const fetchPermit = (id) => {

    const [state, setState] = useState({permit: null, loading: true});
    const {user, accessToken} = useContext(AuthContext);

    const url = 'https://this.is.the.api.url/api/permit/view/' + id;

    useEffect(() => {
        setState({permit: null, loading: true});
        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + accessToken
            }
        })
            .then(res => res.json())
            .then(res => {
                setState({permit: res, loading: false})
            })
            .catch(error => {
                console.log("get data error from:" + url + " error:" + error);
            });
    }, [url]);

    return state;
}

这似乎很好，我获得了许可证，然后查看了所有详细信息。

我通过{p>在PermitScreen.js的许可下方创建了一个按钮

<ActivateButton permit={permit}/>

此按钮具有以下代码

export function ActivateButton(data) {

    const {user, accessToken} = useContext(AuthContext);

    function activate(data) {

        const url = 'https://this.is.the.api.url/api/permit/activate/' + data.permit.id;
        fetch(url,
            {
                method: 'PUT',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + accessToken
                }
            })
            .then((response) => response.json())
            .then((res) => {
                setState(res);


            })
            .catch(error => {
                console.log("get data error: " + error);
            });
    }

    return (
        <Button icon="check" mode="contained" color='green' style={{'margin': 15}}
                onPress={() => activate(data)}>
            Activeer
        </Button>
    )
}

该按钮很好地触发了API调用，但是随后它停止了，我不知道如何使用该函数的响应来更新PermitScreen.js中的许可本身。

我尝试重新调用fetchPermit，或尝试刷新，但给人的印象是我遗漏了一些东西。

我想要的是当有人按下按钮时，重新出现加载程序，系统处理呼叫并使用更新的信息更新屏幕

在React Native中进行新的API调用后从先前调用的UseEffect更新数据

0 个答案: