API 重新运行 [object Object]

Question

我试图在 reactJS 中获取我的 api 请求的正文。它在 submitHandler 函数上返回正确的“主体”，但在不同的组件上调用时返回 [object Object]。下面是我的代码：

登录（提交处理程序）：

 submitHandler(event) {
        event.preventDefault()
     
        axios
            .post("http://localhost:8000/rest-auth/login/", this.state)
            .then(res => {
                 if (res.data){
                    sessionStorage.setItem('data', res)
                    this.setState({redirect:true})
                }
                console.log(res.data)
            })
            .catch(err => {
                this.setState({
                    error: true, errorMessage: err
                })
                // console.log(this.state.errorMessage)
            })
    }

配置文件（componentDidMount）：

 componentDidMount()
    {
        if(sessionStorage.getItem('data')){
         let  user_data = sessionStorage.getItem('data')
            console.log(user_data)
        }
        else {
            this.setState({
                redirect:true
            })
        }
}

componentDidMount 返回 [object Object] 而不是 api body 响应。

Answer 1

这与 API 无关，而与sessionStorage您正在使用的有关。

您只能将字符串存储在本地存储或会话存储中；该setItemAPI将隐式调用.toString()上任何你传递，这对于对象的结果[object Object]。

您需要将内容编码为例如 JSON，即

sessionStorage.setItem('data', JSON.stringify(res.data))

并在加载时对其进行解码，

let user_data = JSON.parse(sessionStorage.getItem('data'))