未处理的拒绝 (TypeError)：无法解构 'Object(...)(...)' 的属性 'setUser'，因为它未定义

Question

我正在尝试在用户使用 createContext 和 useContext 登录后设置用户令牌。以下是我的代码：

import React, { useState, useContext, createContext } from 'react';
import FormErrors from '../../components/formErrors/formErrors';
import Button from '../../components/button/button'
import axios from 'axios';
import { useHistory } from 'react-router-dom'

export default function () {
    const AppContext = createContext();

    const history = useHistory();
    const {setUser} = useContext(AppContext);
    const [email, setEmail] = useState( '' );
    const [password, setPassword] = useState( '' );
    const [errors, setErrors] =  useState( [] );

    const onSubmit = async event => {
        event.preventDefault();
        setErrors( [] );
        let _errors = []

        if (!email) _errors.push('Email is required');
        if (!password) _errors.push('Password is required');

        if(_errors.length) return setErrors(_errors);

        try {
            const data = {
                email,
                password
            };

            const response = await axios.post('/api/user/login', data);
            setUser(response.data.user);
            localStorage.setItem("token", response.data.token);
            history.push('/');
        } catch (e) {
            setErrors([e.response.data.message]);
        }
        
    };

    return (
        <div className="page">
            <h1 className="page__title">
                Login
            </h1>

            <form onSubmit={onSubmit} className="form">
                {!!errors.length && <FormErrors errors={errors} />}
                <div className="form__group">
                    <label className="form__label">
                        Email 
                    </label>
                    <br></br>
                    <input type="text"
                    className="form__input form__group"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    placeholder="johndoe@mail.com"/>
                </div>
                <div className="form__group">
                    <label className="form__label">
                        Password 
                    </label>
                    <br></br>
                    <input type="password"
                    className="form__input form__group"
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                    placeholder="Password..."/>
                </div>

                <Button type="submit">Login</Button>
            </form>
        </div>
    )
}

我不确定为什么我不能在 useContex 中解构属性 'setUser'。我收到错误消息“未处理的拒绝 (TypeError)：无法解构 'Object(...)(...)' 的属性 'setUser'，因为它未定义。”请任何帮助。如果您也能给出一些详细的解释，那将非常有帮助。

Answer 1

问题

const AppContext = createContext(); 需要出现在外部组件中，并且组件需要包装在提供 that 的提供程序中上下文。

解决方案

应用上下文

export const AppContext = createContext({
  setUser: () => {},
});

应用程序

const [user, setUser] = React.useState();

...

return (
  <AppContext.Provider value={{ setUser }}> // <-- wrap app with provider can value
    <App />
  </AppContext>
);

以上组件

import React, { useState, useContext, createContext } from 'react';
...
import { AppContext } from '../path/to/AppContext'; // <-- import context

export default function () {
  ...
  const {setUser} = useContext(AppContext); // <-- destructure should work now
  ...

  return (
    <div className="page">
      ...
    </div>
  )
}

未处理的拒绝 (TypeError)：无法解构 'Object(...)(...)' 的属性 'setUser'，因为它未定义

Unhandled Rejection (TypeError): Cannot destructure property 'setUser' of 'Object(...)(...)' as it is undefined

javascript

token

reactjs

问题

解决方案

未处理的拒绝 (TypeError)：无法解构 'Object(...)(...)' 的 属性 'setUser'，因为它未定义

Unhandled Rejection (TypeError): Cannot destructure property 'setUser' of 'Object(...)(...)' as it is undefined

javascript

token

reactjs

问题

解决方案

未处理的拒绝 (TypeError)：无法解构 'Object(...)(...)' 的属性 'setUser'，因为它未定义