Блог

я использую useState для хранения объекта с одним логическим свойством и использую тернарный оператор для переключения между экранами.

когда я нажимаю кнопку, я вижу в консоли, что значение изменилось, но экран не обновляется, не отображается «я в», консоль показывает это:

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

Когда я изменяю состояние использования на одну переменную, а не на объект, это работает (изменение дочерних элементов), но я действительно хочу использовать с объектом. Поэтому я хочу знать, почему это не работает, является ли какое-то свойство useContext? или ограничение на использование? тем временем я буду использовать 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 (  lt;ExampleContext.Provider value={{ user, setuser }}gt;  {user.logged? lt;AppMain /gt;:lt;Login /gt;}  lt;/ExampleContext.Providergt;  );  }   export default App;  

AppMain.js

 import React from "react"   function AppMain() {  return (  lt;gt;  lt;pgt;I'm inlt;/pgt;  lt;/gt;  )  }   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=gt; {a.logged = true; return a})  console.log(user)  }  return (  lt;gt;  lt;button onClick={log} gt;Log inlt;/buttongt;  lt;/gt;  )  }   export default Login  

ExampleContext.js

 import { createContext } from "react"   const ExampleContext = createContext()   export default ExampleContext  

В useState или useContext нет ничего плохого, ваш способ изменения состояния неправильный. установите его таким образом:

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