#javascript #reactjs #return
Вопрос:
Итак, у меня есть эта простая функция с условным возвратом:
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>;
}
Проблема в том, что код всегда возвращает «работа».
Разве невозможно использовать условный рендеринг с состоянием?
Ответ №1:
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>;
}
Ответ №2:
Крючок 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
});