小编EzJ*_*zJS的帖子

如何使用本地存储、react hooks 和 Context Provider 保持状态持久

我正在我的应用程序中实施身份验证,我遇到的问题是刷新时状态不持久,因此我被重定向回登录屏幕。如何使用 React Hooks 检查是否有authTokenlocal 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)

reactjs react-hooks use-effect

5
推荐指数
2
解决办法
5470
查看次数

无法读取未定义 React Hooks 的属性

我正在尝试使用 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)

javascript events reactjs react-hooks

2
推荐指数
1
解决办法
6267
查看次数

标签 统计

react-hooks ×2

reactjs ×2

events ×1

javascript ×1

use-effect ×1