时间戳

首页 > 解决方案 > 如何在 React-Native 中的 onPress Alert 函数中设置状态

javascript - 如何在 React-Native 中的 onPress Alert 函数中设置状态

问题描述

我目前正在尝试在 React-Native 的 onPress 事件中更改状态的方法，但运气不佳。当有人按下“改变状态？” 召唤警报中的选项，我想将状态更改为true. 但是，当调用setState()或useCallback()切换状态时，它会继续打印错误打印（两次）。

仅供参考：我在代码中将警报称为ExampleAlert()而不是<ExampleAlert />其他地方。

这个问题是否与警报在 RN 中的编写方式有关，或者警报不会触发重新渲染的事实？

  const [state, setState] = useState(false);

  const changeStateCallback = useCallback(() => {
    setState(!state);
  }, [state]);

  const ExampleAlert = () => {
    Alert.alert(
      'Title',
      'Message',
      [
        {
          text: 'Change State?',
          onPress: () => {
            changeStateCallback;
            console.log(state);
            setState(true);
            console.log(state);
          },
        },
        {
          text: 'OK',
          onPress: () => {},
        },
      ],
    );
    return null;
  };

标签： javascriptreact-nativealert

解决方案

useState 是异步的，在同一个环境下看不到变化

所以你只需要这样做：

onPress: () => {
            setState(true);
          },

或者

const handlePress =()=>{
 setState(true);
}

    onPress: () => { handlePress },

此语法() => { }尚未执行，当用户单击它时执行。

编辑1：

const handlePress =()=>{
 setState(true);
 console.log(state) // here you can not see the change
}

console.log(state) //put your console outside of handlePress to see the change

推荐阅读