【问题标题】:React JS + REDUX + JWT Authentication JSON issueReact JS + REDUX + JWT 身份验证 JSON 问题
【发布时间】:2020-09-03 05:27:37
【问题描述】:

我已经尝试了很多来完成这项工作,但我不知道为什么 json 没有打印在 DIV 标签上

我得到一个未定义的 user1

我正在使用我自己的 api 来获取填充在用户中的数据。

{ 成功:true,用户:“普通用户”}

JSON如上

获得授权令牌并成功登录,但是当我获得 JSOn 时,我无法在 HTML 页面中显示用户

请帮忙!

提前致谢

这是我的 HomePage.jsx

import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { userActions } from '../_actions';

class HomePage extends React.Component {
    componentDidMount() {
        this.props.dispatch(userActions.getAll());
    }
    render() {
        var { user, users1 } = this.props;
        console.log(user); // token
        console.log(users1); // json with names and all
        return (
            <div className="col-md-6 col-md-offset-3">
                <h1>Hi {users1.user} !</h1>
                <p>
                    <Link to="/login">Logout</Link>
                </p>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const { users, authentication } = state;
    const { user } = authentication;
    // var users1 = {"success":true,"user":"Normal User"}
    var users1 = users.users
    return {
        user,
        users1
    };
}

const connectedHomePage = connect(mapStateToProps)(HomePage);
export { connectedHomePage as HomePage };```

【问题讨论】:

    标签: javascript json reactjs redux jwt


    【解决方案1】:

    看起来您在 fetch 之后没有解析 JSON,而 users1 在您的情况下是一个字符串。试试JSON.parse(users1)

    【讨论】:

    • 我做到了,这就是我的行动。 function handleResponse(response) { return response.text().then(text =&gt; { const data = text &amp;&amp; JSON.parse(text); if (!response.ok) { if (response.status === 401) { // auto logout if 401 response returned from api logout(); location.reload(true); } const error = (data &amp;&amp; data.message) || response.statusText; return Promise.reject(error); } return data; }); }
    • Ok :) 我不知道你们商店的结构是什么,所以state.users.users 路径存在吗?
    • 它会自动创建Users.users
    猜你喜欢
    • 2020-07-05
    • 2021-02-11
    • 2018-09-10
    • 1970-01-01
    • 1970-01-01
    • 2019-08-04
    • 2019-10-09
    • 2018-02-06
    • 2020-04-10
    相关资源
    最近更新 更多