setState выборка с различными данными с ReactJS - PullRequest
Новая
       1

setState выборка с различными данными с ReactJS

0 голосов
/ 21 мая 2019

Я пытаюсь изменить состояние новой переменной, которая является ответом на выборку данных с моего собственного узла 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));
        }
    }

Мой auth.service 

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;
    });
}

auth.action: пользователь - это то, что мне нужно сохранить. 

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;
    }
}
...