javascript - 为什么我不能从当前状态中获取一个值并在我的 useState 挂钩中使用它?
问题描述
目前,已登录用户的对象设置为当前状态,从下面的 doe 中您可以看到我是从 authContext 引入的。我正在尝试获取 user.firstName 值并将其设置为 useState 挂钩内的作者。当我在我的应用程序中运行它时,我会查看存储 Log 对象但作者值为空白的数据库。我对编码很陌生,所以任何建议都将不胜感激!
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;
解决方案
反应文档:
如果新状态是使用先前状态计算的,则可以将函数传递给 setState。该函数将接收先前的值,并返回一个更新的值。这是一个使用两种形式的 setState 的计数器组件的示例
反应示例:
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
推荐阅读
- c++ - 如何在代码中找到所有悬空指针?
- c++ - __memory_barrier 的标准 C++ 等效项
- ssh - SELinux:命令输出打印在串行而不是 ssh
- oracle - 无法验证 - 未找到父键
- rust - 锈 | 为什么当我创建新的哈希映射时它给了我错误
- javascript - Vue.js 动态指令参数不起作用
- darknet - 如何修改 YOLOv4 的损失图表?
- mariadb - 联合加入玛丽亚数据库后如何删除空值?
- python - 使用for循环从python字典中获取特定键的值并将其传递给另一个python脚本
- arrays - 这种在 Firebase 数据库中实现数组的反模式方式是否致命?