reactjs 如何在React中使用useCookies完全删除Cookie而不留下未定义的内容

uqjltbpv 于 2023-01-12 发布在 React

关注(0)|答案(4)|浏览(253)

我有一个django-react应用程序，其中使用了django-rest-framework令牌验证包，我会从API调用中获取令牌，并将其插入到一个钩子（useCookies）中，钩子将作为cookie存储在中，我的代码如下：

import { useCookies } from "react-cookie";

const Home = () => {
     const[token, setToken, removeToken] = useCookies(['loginToken']);
}

const loginBtn = () => {
  APIService.LoginUser({
    username: username,
    password: password,
  })
    .then((response) => {
      setToken("loginToken", response.token);
    })
    .catch((error) => console.log(error));
};

现在，我正在尝试创建一个注销功能，用户只需按下一个注销按钮即可注销。目前为止，我所拥有的是：

const logout = () => {
     removeToken(['loginToken']);
}

当按钮被按下时，它将我的cookie的值变为未定义.之前

loginToken: 'asd99123jsd9asd9231'

之后

loginToken: 'undefined'

从我读到的文档中，它应该完全删除cookie，甚至不留下cookie变量。我在这里可能错过什么呢？提前这么多感谢你。如果你需要任何更多的信息，我会非常乐意给予你请耐心，因为这是我的第一个React项目。

reactjs

来源：https://stackoverflow.com/questions/68600015/how-to-remove-cookies-completely-using-usecookies-in-react-without-leaving-undef

4条答案

按热度按时间

tyg4sfes1#

我在删除cookie时遇到了同样的问题。在我的例子中，调用removeCookie时cookie是相同的。然后我找到了一个解决方案：我没有告诉path删除cookie函数。

removeCookie('cookie-name',{path:'/'});

P.S. -此处找到解决方案（另一个StackOverflow问题）：cookies.remove('abc') not working in reactJs

赞(0）回复(0）举报 2023-01-12

9ceoxa922#

Cookie API的remove()方法根据Cookie的名称和URL删除Cookie。

browser.cookies.remove('loginToken')

赞(0）回复(0）举报 2023-01-12

vmdwslir3#

您只需给出cookie名称，不需要额外的[]

import { useCookies } from "react-cookie";

const [cookies, setCookie, removeCookie] = useCookies();

useEffect(() => {
   removeCookie(cookiesName);
}, [removeCookie]);

参见react-cookie npm文档中的参考文献：
removeCookie（名称，[选项]）删除Cookie
名称（字符串）：cookie名称
选项（对象）

赞(0）回复(0）举报 2023-01-12

5vf7fwbs4#

希望这对你有帮助。

import React, { useState } from 'react';
import { useCookies } from 'react-cookie';

const App = () => {
    const [name, setName] = useState('');
    const [pwd, setPwd] = useState('');
    const [cookie, setCookie, removeCookie] = useCookies();

const handle = () => {
    setCookie('Name', name, { path: '/' });
    setCookie('Password', pwd, { path: '/' });
};

const handleRemove = () => {
    removeCookie('Name', { path: '/', domain: 'localhost' });
};

return (
    <div className="App">
        <h1>Name of the user:</h1>
        <input
            placeholder="Name"
            value={name}
            onChange={(e) => setName(e.target.value)}
        />
        <h1>Password of the user:</h1>
        <input
            type="password"
            placeholder="Password"
            value={pwd}
            onChange={(e) => setPwd(e.target.value)}
        />
        <div>
            <button onClick={handle}>Set Cookie</button>{' '}
        </div>
        <br />
        {cookie.Name && (
            <div>
                Name: <p>{cookie.Name}</p>
            </div>
        )}
        <div>
            <button onClick={handleRemove}>Remove Cookie</button>{' '}
        </div>
    </div>
);
};
export default App;

赞(0）回复(0）举报 2023-01-12

我来回答

reactjs 如何在React中使用useCookies完全删除Cookie而不留下未定义的内容

4条答案

相关问题

热门标签

最新问答