cookie钩在功能组件中不起作用

Question

我有此代码：

import React from 'react'
import { useCookies } from 'react-cookie'

const CookiesHelp = () => {
    const [cookies, setCookie] = useCookies(['token'])

    const setToTrue = () => {
        setCookie('token', 'true')
    }

    return (
        <>
            <label>{cookies.token}</label>
            <button onClick={setToTrue}>Set true</button>
        </>
    )
}

export default CookiesHelp

当我运行应用程序时，我有一个错误：

** react.development.js：209警告：无效的挂钩呼叫。钩子只能在功能组件的主体内部调用。这可能是出于以下原因之一：

1. 您可能有不匹配的react版本和渲染器（例如react dom），
2. 会打破挂钩规则
3. 您可能 请参阅 https://reactjs.org/link/link/link/invalid-hook-call 关于如何调试和解决此问题。**

我在功能组件中使用钩子。为什么发生此错误？

使用CookiesHelp：

export default class App extends Component {
    static displayName = App.name;

    constructor(props) {
        super(props);
        this.state = { forecasts: [], loading: true }
    }

    componentDidMount() {
        this.populateWeatherData()
    }

    static renderForecastsTable(forecasts) {
        return (
            <table className='table table-striped' aria-labelledby="tabelLabel">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Temp. (C)</th>
                        <th>Temp. (F)</th>
                        <th>Summary</th>
                    </tr>
                </thead>
                <tbody>
                    {forecasts.map(forecast =>
                        <tr key={forecast.date}>
                            <td>{forecast.date}</td>
                            <td>{forecast.temperatureC}</td>
                            <td>{forecast.temperatureF}</td>
                            <td>{forecast.summary}</td>
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

    render() {
        let contents = this.state.loading
            ? <p><em>Loading... Please refresh once the ASP.NET backend has started. See <a href="https://aka.ms/jspsintegrationreact">https://aka.ms/jspsintegrationreact</a> for more details.</em></p>
            : App.renderForecastsTable(this.state.forecasts);

        return (
            <>
                <div>
                    <h1 id="tabelLabel">Weather forecast</h1>
                    <p>This component demonstrates fetching data from the server.</p>
                    {contents}
                </div>
                <UploadPicture />
                <CookiesHelp />
            </>
        );
    }

    async populateWeatherData() {
        const response = await fetch('https://localhost:7054/WeatherForecast');
        const data = await response.json();
        this.setState({ forecasts: data, loading: false });
    }
}

默认的Visual Studio ReactJS + WebAPI模板。 usestate 在cookieshelp中不要抛出例外。

root.render(
    <CookiesProvider>
        <App />
    </CookiesProvider>
);

我可能需要在app.js中使用 usecookies 吗？

Answer 1

我遇到了同样的问题，即使在功能组件中被调用时，SetCookie也无法正常工作。
我通过将React-Cookie重新安装在正确的位置来解决，事实证明，我的React-App已将Node_Modules安装在两个不同的级别上，并导致React模块在React-Cookie代码中未定义。

app
 |node_modules     <-- where packages should be
 |package.json
node_modules
package.json       <-- deleted those and reinstalled in app