反应条件渲染无法从状态中识别真答案

【问题标题】：React conditional rendering not recognising true from state反应条件渲染无法从状态中识别真
【发布时间】：2021-08-09 03:54:38
【问题描述】：

所以我有这个带条件返回的简单函数：

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

问题是代码总是返回“work”。是不是不能用带状态的条件渲染？

【问题讨论】：

标签： javascript reactjs return

【解决方案1】：

useState 钩子为您提供了一个包含状态值和 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>;
}

【讨论】：

【解决方案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
    });

【讨论】：