不要渲染新屏幕 usecontext usestate react object boolean simple

Question

我使用 useState 存储一个 object，一个属性布尔值，并使用三元运算符在屏幕之间切换。

当我单击该按钮时，我在控制台中看到该值已更改但屏幕没有更新，不显示“我在”，控制台显示如下：

{logged: false, name: 'example'} Login.js:7
{logged: true, name: 'example'} Login.js:9

当我将 useState 更改为单个变量时，不是 object，有效（更改子项），但我真的想与 object 一起使用。所以我想知道为什么不起作用，是一些属性的 useContext？或对useState的限制？同时我将使用带有单个赋值（布尔值）和多个 variables-lines

的 useState

使用 useContext 的原因是为了传递变量，以防有很多层的孩子

App.js

    import React, { useState } from "react"
    import AppMain from './Components/AppMain';
    import Login from './Components/Login';
    import ExampleContext from "./ExampleContext";

    function App() {
      const [user, setuser] = useState({"logged" : false, name: "example"})
      return (
        <ExampleContext.Provider value={{ user, setuser }}>
            {user.logged? <AppMain />:<Login />}
          </ExampleContext.Provider>
      );
    }

    export default App;

AppMain.js

    import React from "react"

    function AppMain() {
      return (
        <>
          <p>I'm in</p>
        </>
      )
    }

    export default AppMain

Login.js

    import React, { useContext } from "react"
    import ExampleContext from "../ExampleContext"

    function Login() {
      const {user,setuser} = useContext(ExampleContext)
      function log(){
        console.log(user)
        setuser(a=> {a.logged = true; return a})
        console.log(user)
      }
      return (
        <>
          <button onClick={log} >Log in</button>
        </>
      )
    }

    export default Login

ExampleContext.js

    import { createContext } from "react"

    const ExampleContext = createContext()

    export default ExampleContext

Answer 1

useState 或useContext 都没有问题，你改变状态的方式是错误的。这样设置：

setuser(a=>({...a,logged:true}));

不要渲染新屏幕 usecontext usestate react object boolean simple

dont render new screen usecontext usestate react object boolean simple

javascript

reactjs

react-hooks

use-state

use-context