Question

我想传递我在 Login.jsx 组件中声明的 customerFlag 的值，并想在 Header.jsx 中访问该值.我正在使用 Context API 和 useContext。基本上在这里我在两个组件之间传递值，你可以说兄弟组件。但问题是我在 UserContext.Provider value={customerFlag} 标签下得到的 customerFlag 值是 undefined 。如果我做错了，请纠正我。我是 React js 的初学者。

登录.jsx

import React, { createContext } from 'react';

      //Creating Context API
        const UserContext = createContext(null);
        .
        .
        .
        } else {
    
                 customerFlag='customer';
                 window.alert('Login successfull');
                 history.push('/home');
    
                }

return (
        <>
            
            {/* Providing the context to Header*/}

            <UserContext.Provider value={customerFlag} >
                <Header />
            </UserContext.Provider>

        </>
        )

Header.jsx

import React,{useContext} from 'react';
import {UserContext} from './Login';

const Header = () => {
    
    const context = useContext(UserContext)
    console.log(context);

return ();
}

Answer 1

customerFlag='customer'; 在 React 组件的生命周期中是未知的。这意味着如果 customerFlag 稍后更改，您的上下文 不会注意到。

您需要使用 state 作为客户标志。例如：

const [cusomterFlag, setCustomerFlag] = useState('');

// ...

if(...) {
  // ...
} else {
  setCustomerFlag('customer');
  window.alert('Login successfull');
  history.push('/home');
}

使用 Context API 和 useContext (React js) 传递值

1 个答案: