如何在單個事件處理程式上實作多個功能？-有解無憂

我有這個簡單的反應本機應用程式，單擊按鈕會將用戶重定向到頁面。我將資料保存在快取中，這樣如果用戶單擊存盤按鈕，它就會存盤資料，重繪后它會設定存盤資料。但是，我想在一個按鈕上實作這個邏輯，而不是像現在這樣在兩個不同的按鈕上實作。有人可以解釋一下我怎么能做到這一點？

export const App = () => {
  const [showFirstWeb, setFirstWeb] = useState(false);

  const getData = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem("@web_Key");
      return setFirstWeb(JSON.parse(jsonValue));
    } catch (e) {
      console.log("error", e);
    }
  };

  useEffect(() => getData, []);

  const storeData = async () => {
    try {
      const jsonValue = JSON.stringify(showFirstWeb);
      await AsyncStorage.setItem("@web_Key", jsonValue);
    } catch (e) {
      console.log("error", e);
    }
  };

  return (
    <View>
      <View style={styles.buttonStyle}>
         <Button onPress={setFirstWeb(!showFirstWeb)}/>
         <Button onPress={storeData} title="store"/>
      <View>
        {showFirstWeb && <MyWebComponent uri="https://www.google.com/" />}
      </View>
    </View>
  );
};

const MyWebComponent = (uri) => {
  return <WebView source={uri} />;
};```

uj5u.com熱心網友回復：

export const App = () => {
  const [showFirstWeb, setFirstWeb] = useState(false);

  const getData = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem("@web_Key");
      return setFirstWeb(JSON.parse(jsonValue));
    } catch (e) {
      console.log("error", e);
    }
  };

  // you forgot to call the function here
  useEffect(() => getData(), []);

  const storeData = async () => {
    try {
      // get the new value
      const newShowFirstWeb = !showFirstWeb
      // use the new value
      setFirstWeb(newShowFirstWeb)
      const jsonValue = JSON.stringify(newShowFirstWeb );
      await AsyncStorage.setItem("@web_Key", jsonValue);
    } catch (e) {
      console.log("error", e);
    }
  };

  return (
    <View>
      <View style={styles.buttonStyle}>
         <Button onPress={storeData} title="store"/>
      <View>
        {showFirstWeb && <MyWebComponent uri="https://www.google.com/" />}
      </View>
    </View>
  );
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/513827.html

標籤：javascript反应反应式

上一篇：隱藏材質UI資料網格過濾器中的列

下一篇：如何導航到特定路線而不在反應中添加網址