Блог

Итак, у меня есть эта простая функция с условным возвратом:

 export default function App() {
const appState = useState({
signed: true,
user: {
  login: null,
  password: null,
  rights: null,
},
});

return <div className="app">{appState.signed ? "does not" : "work"}</div>;
}
 

Проблема в том, что код всегда возвращает «работа».
Разве невозможно использовать условный рендеринг с состоянием?

useState Крючок дает вам массив со значением состояния и методом настройки.

Проблема в том, что вы обращаетесь к этому массиву, возвращаемому, useState и вы не можете получить к нему доступ signed , что приводит к false отображению текста «работает»

Так что сделайте это вместо этого

 export default function App() {

  const [appState, setAppState] = useState({
    signed: true,
    user: {
      login: null,
      password: null,
      rights: null,
    },
  });

 return <div className="app">{appState.signed ? "does not" : "work"}</div>;
}
 

Крючок useState возвращает массив длиной 2.

  const [appState, changeAppState ] = useState({
signed: true,
user: {
  login: null,
  password: null,
  rights: null,
},
});

...

//To change signed to true, try using the callback pattern

    changeAppState ((prevAppState) => ({
       ...prevAppState,
      signed: false
    }));
    
//You can do this, but callback approach is safer

    changeAppState ({
       ...prevAppState,
       signed: false
    });