[英]I can't access the initial state of my useState hook inside of my method to change the state
[英]Why cant I take a value from the current state and use that inside of my useState hook?
目前,登錄用戶的 object 設置為當前 state,從下面的 doe 中您可以看到我是從 authContext 引入的。 我正在嘗試獲取 user.firstName 值並將其設置為 useState 掛鈎內的作者。 當我在我的應用程序中運行它時,我查看存儲日志 object 但作者值為空白的數據庫。 我對編碼很陌生,所以任何建議都將不勝感激!
import React, { useState, useContext } from "react";
import M from "materialize-css/dist/js/materialize.min.js";
import LogContext from "../context/logs/logContext";
import AuthContext from "../context/auth/authContext";
const AddLogModal = () => {
const logContext = useContext(LogContext);
const authContext = useContext(AuthContext);
const { user } = authContext;
const { addLog } = logContext;
const [log, setLog] = useState({
title: "",
description: "",
attention: "",
author: user.firstName,
date: new Date(),
});
const { title, description, attention, author } = log;
const onChange = (e) => setLog({ ...log, [e.target.name]: e.target.value });
const onSubmit = (e) => {
e.preventDefault();
if (title === "" || description === "" || attention === "") {
M.toast({ html: "Please enter a title and description.." });
} else {
setLog({ ...log, [e.target.name]: e.target.value });
}
addLog(log);
setLog({
title: "",
description: "",
attention: "",
author: user.firstName,
});
};
return (
<form id="add-log-modal" className="modal" style={modalStyle}>
<div className="modal-content">
<h4>Open New Issue</h4>
<div className="row">
<div className="input-field">
<input type="text" name="title" value={title} onChange={onChange} />
<label htmlFor="message" className="active">
Log Title
</label>
</div>
</div>
<div className="input-field">
<input
type="text"
name="description"
value={description}
onChange={onChange}
/>
<label htmlFor="message" className="active">
Log Description
</label>
</div>
<div className="input-field">
<input type="text" name="author" value={author} onChange={onChange} />
<label htmlFor="message" className="active">
Created By:
</label>
</div>
<div className="row">
<div className="input-field">
<p>
<label>
<input
type="radio"
name="attention"
checked={attention === "Needs Attention"}
value="Needs Attention"
onChange={onChange}
/>
<span>Needs Attention</span>
</label>
</p>
<p>
<label>
<input
type="radio"
name="attention"
checked={attention === "Issue Resolved"}
value="Issue Resolved"
onChange={onChange}
/>
<span>Issue Resolved</span>
</label>
</p>
</div>
</div>
</div>
<div className="modal-footer">
<a
href="#!"
onClick={onSubmit}
className="modal-close waves-effect waves-light blue btn"
>
Enter
</a>
</div>
</form>
);
};
const modalStyle = {
width: "75%",
height: "75%",
};
export default AddLogModal;
授權上下文
import React, { useReducer } from "react";
import axios from "axios";
import AuthContext from "./authContext";
import setAuthToken from "../setAuthToken";
import authReducer from "./authReducer";
import {
REGISTER_SUCCESS,
REGISTER_FAIL,
LOGIN_FAIL,
LOGIN_SUCCESS,
LOGOUT,
USER_LOADED,
AUTH_ERROR,
CLEAR_ERRORS,
} from "../Types";
const AuthState = (props) => {
const initialState = {
token: localStorage.getItem("token"),
isAuthenticated: false,
loading: false,
user: {},
error: null,
};
const [state, dispatch] = useReducer(authReducer, initialState);
// Load User
const loadUser = async () => {
if (localStorage.token) {
setAuthToken(localStorage.token);
}
try {
const res = await axios.get("/api/auth");
dispatch({ type: USER_LOADED, payload: res.data });
} catch (err) {
dispatch({ type: AUTH_ERROR });
}
};
// Register User
const register = async (formData) => {
const config = {
headers: {
"Content-type": "application/json",
},
};
try {
const res = await axios.post("/api/users", formData, config);
dispatch({
type: REGISTER_SUCCESS,
payload: res.data,
});
loadUser();
} catch (err) {
dispatch({
type: REGISTER_FAIL,
payload: err.response.data.msg,
});
}
};
// Login User
const login = async (formData) => {
const config = {
headers: {
"Content-type": "application/json",
},
};
try {
const res = await axios.post("/api/auth", formData, config);
dispatch({
type: LOGIN_SUCCESS,
payload: res.data,
});
loadUser();
} catch (err) {
dispatch({
type: LOGIN_FAIL,
payload: err.response.data.msg,
});
}
};
// Logout
const logout = () => {
dispatch({
type: LOGOUT,
});
};
// Clear Errors
const clearErrors = () => {
dispatch({
type: CLEAR_ERRORS,
});
};
return (
<AuthContext.Provider
value={{
token: state.token,
isAuthenticated: state.isAuthenticated,
loading: state.loading,
user: state.user,
error: state.error,
register,
login,
clearErrors,
loadUser,
logout,
}}
>
{props.children}
</AuthContext.Provider>
);
};
export default AuthState;
反應文檔:
如果使用以前的 state 計算新的 state,則可以將 function 傳遞給 setState。 function 將接收先前的值,並返回更新的值。 下面是一個計數器組件的示例,它同時使用了 setState 的 forms
反應示例:
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.