Question

完整的错误图片： error image

我正在发出获取请求，并且当我想设置状态以保存发生的某些错误时。我该如何解决？

代码：

    onClickLogIn = (username, password) => {
    const request = fetch('[SOMEAPILINK]', {
    method: 'POST',
    headers: {
        Accept: 'text/javascript',
        'Content-Type': 'text/javascript',
    },
    body: JSON.stringify({
        username: username,
        password: password,
        login: 1
    })
    }).then(response => response.json()).then(responseJson => {   
        console.log(responseJson)
        this.setState({
            errorCheck: responseJson.error
        })
    }).catch(error => {
        console.log("error")
    })
    // console.log(errorCheck);
    console.log(request); 
    console.log("----ERROR CHECK ----")
    console.log(this.state.errorCheck)
    this.props.navigation.navigate("Second")

}

因此，当我要设置错误时，请检查该错误是否出现...

谢谢！

Answer 1

then(response => response.json()).then(responseJson => {   
    console.log(responseJson)
    this.setState({
        errorCheck: responseJson.error
    })
    this.props.navigation.navigate("Second")
})

=>在this.props.navigation.navigate("Second")方法内添加此导航代码then()，以便在更新state之后调用导航，这样您的错误就会消失。

=>并尝试使用state 功能（不是对象）来更新setState，因此请尝试

    this.setState(function (prevState, props) {
        return { errorCheck: responseJson.error}
    })

这将减少对象更新状态所花费的时间。

=>这样您的代码将类似于

  then(response => response.json()).then(responseJson => {   
    console.log(responseJson)
    this.setState(function (prevState, props) {
        return { errorCheck: responseJson.error}
    })
    this.props.navigation.navigate("Second")
})

Answer 2

setState是异步的。因此，如果您在更新状态之前卸载有状态组件（通过调用Navigation），则会收到警告。

您应该改用setState提供的回调

.then(response => response.json()).then(responseJson => {   
        console.log(responseJson)
        this.setState({
            errorCheck: responseJson.error
        }, () => {
    this.props.navigation.navigate("Second")
        })

})

警告：无法在React Native中的未安装组件上调用setState（或forceUpdate）

2 个答案: