如何使用功能组件从子级读取和更新 React Context？答案

【问题标题】：How to read and update React Context from child with function components?如何使用功能组件从子级读取和更新 React Context？
【发布时间】：2020-08-23 21:34:19
【问题描述】：

在我的 App 组件中，我创建了一个上下文（AuthContext）并定义了一个状态（已验证）和一个更改状态的方法（setAuthenticated）：

import React, {useState} from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Home from './pages/Home.js';



export const AuthContext = React.createContext();
function App() {
  const [authenticated, setAuthenticated] = useState(true);

  return (
    <AuthContext.Provider value={{authenticated, setAuthenticated}}>
      <BrowserRouter>
        <Switch>
          <Route exact path={"/"} component={Home}  />
        </Switch>
      </BrowserRouter>
    </AuthContext.Provider>
  );
}

export default App;

从子组件（主页）我可以记录authenticated 的值但不能渲染它：

import React from 'react';
import { AuthContext } from '../App.js';

function Home(props) {
const { authenticated, setAuthenticated } = React.useContext(AuthContext);
console.log(authenticated);
console.log(setAuthenticated);

  return (
    <div>
        {authenticated}
        <button onClick={() => setAuthenticated(false)}>
          Logout
        </button>
    </div>
  );
}

export default Home;

如何在我的子组件Home 中呈现authenticated 的值？

【问题讨论】：

标签： reactjs

【解决方案1】：

React 不会渲染 Boolean, null or undefined values。检查documentation on it here

为了呈现经过身份验证的值，您需要将其转换为字符串

return (
    <div>
        {authenticated.toString()}
        <button onClick={() => setAuthenticated(false)}>
          Logout
        </button>
    </div>
  );

【讨论】：