我正在我的应用程序中实施身份验证,我遇到的问题是刷新时状态不持久,因此我被重定向回登录屏幕。如何使用 React Hooks 检查是否有authToken来local storage让我在刷新时保持登录状态。
这是我的受保护路由,用于检查身份验证令牌
<Route
{...rest}
render={
props=>
authTokens ? (
<Component {...props}/>
) : (
<Redirect
to ={
{
pathname: '/login',
state: {
from: props.location
}
}
}
/>
Run Code Online (Sandbox Code Playgroud)
这是我的登录页面功能
function Login(props) {
const [isLoggedIn, setLoggedIn] = useState(false);
const [isError, setIsError] = useState(false);
const [firstName, setUserName] = useState("");
const [password, setPassword] = useState("");
const { setAuthTokens } = useAuth();
function postLogin() {
axios.post("http://10.6.254.22:5000/userinformation/login", {
firstName,
password
}).then(result => { …Run Code Online (Sandbox Code Playgroud) 我正在尝试使用 react hooks 创建一个搜索功能,但它一直返回错误:
无法读取未定义的属性
updateSearch每当我在输入字段中输入该函数时。
const [search, setSearch] = React.useState('');
const [searchResults, setSearchResults] = React.useState([]);
const [state, setState] = React.useState({
open: false,
name: '',
users:[]
});
useEffect(() => {
getAllUsers();
}, []);
const getAllUsers = () => {
fetch('/userinformation/', {
method: 'GET',
headers: {'Content-Type':'application/json'}
})
.then(function(response) {
return response.json()
}).then(function(body) {
console.log(body);
setState({...state, users: body });
})
}
const updateSearch = (event) => {
setSearch(event.target.value)
}
React.useEffect(() => {
const results = state.users.filter(user =>
user.toLowerCase().includes(search)
);
setSearchResults(results);
}, …Run Code Online (Sandbox Code Playgroud)