React 條件渲染無法從 state 識別 true

Question

所以我有這個簡單的 function 有條件返回：

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>;
}

問題是代碼總是返回“工作”。 state 不能使用條件渲染嗎？

Answer 1

useState鈎子為您提供了一個包含 state 值和 setter 方法的數組。

問題是您正在訪問由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>;
}

Answer 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
    });