React Native useState 字符串与条件渲染答案

【问题标题】：React Native useState string with conditional renderingReact Native useState 字符串与条件渲染
【发布时间】：2020-06-27 22:34:25
【问题描述】：

我正在尝试以与通常使用 useState 相同的方式执行 if 语句，但它失败了。

我有这些价值观

let [L01, setL01] = useState('');
let [L02, setL02] = useState('');

let [level01, setlevel01] = useState(false);
let [level01_Open, setlevel01_Open] = useState(false);
let [level01_img, setlevel01_img] = useState(false);
let [locked_level01, setlocked_level01] = useState(false);

let [level02, setlevel02] = useState(false);
let [level02_Open, setlevel02_Open] = useState(false);
let [level02_img, setlevel02_img] = useState(false);
let [locked_level02, setlocked_level02] = useState(false);

L01 然后设置为“是”，而 L02 设置为“否”

然后，我尝试基于该数据运行 if 语句，但是它将 L01 识别为 Yes，但是它未能将 if statmenet 中的值设置为 true。

 if ( L01 == 'Yes') {
        setlevel01(true)
        setlevel02_Open(true)
        setlevel01_img(true)
       } else {
        setlevel01(false)
        setlevel02_Open(false)
        setlevel01_img(false)
       }

       if ( L02 == 'Yes') {
        setlevel02(true) 
        setlevel01_img(false)
        setlevel02_img(true)
       } else  {
        setlevel02(true)
        setlevel02_img(false)
      }

【问题讨论】：

标签： react-native jsx

【解决方案1】：

您需要使用useEffect 设置一个效果挂钩来观察L01 和L02 的变化：

useEffect(() => {
  // Define any login and state update here when  L01 or L02 change

  const L01Flag = L01 === 'Yes';
  setlevel01(L01Flag);
  setlevel02_Open(L01Flag);
  setlevel01_img(L01Flag);

  const L02Flag = L02 === 'Yes';
  setlevel02(L02Flag);
  setlevel01_Open(L02Flag);
  setlevel02_img(L02Flag);

}, [L01, L02]);

【讨论】：

啊！谢谢你。您的回答对我有帮助的实际部分是，我需要一个完全独立的 useEffect ，因为我最初有一个来设置数据。问题虽然。为什么需要我在useEffect的末尾创建一个数组？如果我在第一次 useEffect 中没有这样做，这有什么好处？
useEffect 末尾的数组实际上告诉useEffect 何时执行。如果useEffect 将在L01 或L02 之一发生变化时执行ONLY。
如果您从数据库中提取数据以将 L01 或 L02 设置为 Yes 或 No，并且由于 React Natives 的命令，您必须在 useEffect 之后提取该数据？因为在我的第一个 UseEffect 中，如果我在数组创建错误后包含数组，说明它无法读取属性，因为数据不存在，我会这样做。
您还必须设置一个useEffect 挂钩来提取数据。当您将一个空数组传递到useEffect 的末尾时，该挂钩只运行一次，然后就像类组件中的componentdidMount 一样，您可以在其中加载数据库数据然后更新状态。
啊，这很有道理，所以如果我这样做，那么：let [ data, setData ] = useState(useQuery(GetLevelsQuery));如何解构数据返回以设置变量 L01 和 L02？