Question

我有以下反应本机代码（以下代码）。这是签到表格。当用户输入用户名和密码时，登录按钮将变为“启用”，因此可以按下它，并触发“ signUpHandler”功能。此函数执行以下操作：

1）将登录按钮设置为false，以防止多次请求

2）使用输入的凭据向服务器发出异步axios请求

3）检查请求的响应（状态）

4）无论如何，将登录按钮设置回true

警报是一个组件，由绝对定位的视图和其中的文本组成。它从道具中获取可见性，消息，回调和持续时间。

将“警报组件”切换道具设置为true时，组件将向下滑动（动画）。内部超时从持续时间开始，并且当超时完成时，（a）警报组件再次滑上，并且（b）触发回调函数。该回调函数将警报状态下的toggle属性设置为false，因此在新函数调用中可以将其设置为true。

当请求失败时，将引发axios错误，并被try / catch / finally块捕获。

此代码无法显示警报组件。当我删除最后一部分时，它起作用了！或者，当我忽略异步axios-request时，它也可以工作！

我认为问题是：

final-part中的setButton调用触发重新渲染。当警报状态已经更新时会发生这种重新渲染，但是由于重新渲染，警报状态会恢复为默认状态。

这是我的完整代码：

import React from 'react';
import { View } from 'react-native';
import Alert from './components';

const Screen = (props) => {
  const [button, setButton] = useState(false);

  const [alert, setAlert] = useState({
    toggle: false,
    message: ''
  });

  const signInHandler = async () => {
    try {
      // set the sign in button to false to prevent
      // multiple requests
      setButton(false);
      const request = await axios({...})

      switch (request.status) {
        case 200:
          // good request status
          setAlert(prevState => ({ toggle: true, message: 'ok' }));
          break;
        default:
          // bad request status (eg. 400)
          setAlert(prevState => ({ toggle: true, message: 'not ok' }));
          break
      }
    } catch (err) {
      // show an error when the axios request throws an error
      setAlert(prevState => ({ toggle: true, message: 'error' }));
    } finally {
      // set the sign in button back to true whatever
      // the response is
      setButton(true);
    }
  };

  const callbackFn = () => {
    // set the toggle back to false so it can be re-toggled again
    setAlert(prevState => ({ ...prevState, toggle: false }));
  }

  return (
      <View>
        <Alert toggle={alert.toggle} message={alert.message} callback={callbackFn} duration={5000} />
      </View>
  );
};

export default Screen;

重新渲染阻止视图在本机反应中显示

0 个答案: