setState使用ReactJS提取不同的数据

时间:2019-05-21 11:58:10

标签: node.js reactjs redux react-redux

我正在尝试更改新变量的状态,该状态是从我自己的节点js服务器获取数据的响应。

每次我这样做时,他们都会说“数据”没有定义。我尝试在组件的状态声明中添加新变量,但这给了我相同的答案。

这是代码:

我的组件:

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            IP: "",
            username: "",
            password: "",
            submitted: false,
            data: "" //i created this variable to try to save it. but it doesn't work. so useless.
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        const { name, value } = e.target;
        this.setState({ [name]: value });
    }

    handleSubmit(e) {
        e.preventDefault();
        this.setState({ submitted: true });
        const { IP, username, password } = this.state;
        const { dispatch } = this.props;
        if (IP && username && password) {
            dispatch(authActions.login(IP, username, password));
        }
    }

我的身份验证服务

function login(IP, username, password) {
    const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({IP, username, password })
    };

    return fetch(`http://localhost:8080/login`, requestOptions)
        .then(handleResponse)
        .then(user => {
            localStorage.setItem("user", JSON.stringify(user));
            return user;
        });
}

function handleResponse(response) {
    return response.text().then(text => {
        const data = text && JSON.parse(text);
        if (!response.ok) {
            if (response.status === 401) {
                console.log("Error 401");
            }
            const error = (data && data.message) || response.statusText;
            return Promise.reject(error);
        }
        return data;
    });
}

身份验证操作:用户就是我需要保存的内容。

function login(IP, username, password) {
    return dispatch => {
        dispatch(request({username}));
        authService.login(IP, username, password).then(
            user => {
                dispatch(success(user));
                console.log(user);
                alert(user);
            },
            error => {
                dispatch(failure(error.toString()));
                dispatch(alertActions.error(error.toString()));
            }
        )
    };

authentification.reducer:

let user = JSON.parse(localStorage.getItem("user"));
const initialState = user ? { loggedIn: true, user } : {};

export function authentication(state = initialState, action) {
    switch (action.type) {
        case authConstants.LOGIN_REQUEST:
            return {
                loggingIn: true,
                user: action.user
            };
        case authConstants.LOGIN_SUCCESS:
            return {
                loggedIn: true,
                user: action.user,
            };
        case authConstants.LOGIN_FAILURE:
            return {};
        case authConstants.LOGOUT:
            return {
                loggedIn: false
            };
        default:
            return state;
    }
}

0 个答案:

没有答案