如何在React Native单个按钮事件处理中实现多个功能？

要把状态切换和缓存存储两个功能合并到单个按钮，只需要创建一个合并处理函数，在函数内先完成状态切换，再将新状态值存入AsyncStorage即可。同时需要修正原代码里的几处错误，确保功能正常运行：

具体实现步骤 #

1. 定义合并函数：先计算新状态值，同步更新组件状态与缓存数据
2. 修正原代码的细节问题：比如useEffect未正确调用读取函数、按钮点击事件写法错误、网页组件的props接收格式问题

修改后的完整代码 #

import { useState, useEffect, View, Button, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { WebView } from 'react-native-webview';

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

  // 读取缓存恢复状态
  const getData = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem("@web_Key");
      // 处理缓存不存在的情况，设置默认值
      setFirstWeb(jsonValue ? JSON.parse(jsonValue) : false);
    } catch (e) {
      console.log("读取缓存错误", e);
    }
  };

  // 组件挂载时执行缓存读取
  useEffect(() => {
    getData();
  }, []);

  // 合并状态切换与缓存存储的函数
  const toggleAndStore = async () => {
    const newState = !showFirstWeb;
    // 更新组件状态
    setFirstWeb(newState);
    // 将新状态存入缓存
    try {
      const jsonValue = JSON.stringify(newState);
      await AsyncStorage.setItem("@web_Key", jsonValue);
    } catch (e) {
      console.log("存储数据错误", e);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonStyle}>
        {/* 使用合并后的函数作为点击事件，按钮标题随状态动态变化 */}
        <Button 
          onPress={toggleAndStore} 
          title={showFirstWeb ? "隐藏网页" : "显示网页"} 
        />
      </View>
      {showFirstWeb && <MyWebComponent uri="https://www.google.com/" />}
    </View>
  );
};

// 修正网页组件的props接收与WebView的source格式
const MyWebComponent = ({ uri }) => {
  return <WebView source={{ uri }} />;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
  },
  buttonStyle: {
    marginBottom: 10,
  },
});

关键细节说明 #

• 合并函数逻辑：先计算新状态值newState，确保存入缓存的是最新状态，避免useState异步更新导致的状态不一致
• 动态按钮标题：根据当前状态切换按钮文字，让用户清晰知道点击后的操作结果
• 缓存容错处理：添加jsonValue ? ... : false的判断，避免首次启动缓存不存在时的状态异常
• 原代码修正点：
  • 修复useEffect未调用getData的错误
  • 修正按钮onPress直接执行函数的问题（原写法会导致组件渲染时就触发状态更新）
  • 修正MyWebComponent的props接收和WebView的source格式问题

内容的提问来源于stack exchange，提问作者fakermaker