Question

我是React Native的新手，我试图呈现未读通知的计数，因为我在HOC中调用了我的API，在最初的几秒钟内一切正常，但此后，我开始出现以下错误

func.apply不是函数

下面是我的代码

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Modal, View } from "react-native";
import { themes } from "./constants";
import { AsyncStorage } from "react-native";

export default (OriginalComponent, animationType) =>
  class extends Component {
    static propTypes = {
      handleFail: PropTypes.func,
      theme: PropTypes.string,
      visible: PropTypes.bool
    };
    state = {
      modalVisible: true
    };

    static getDerivedStateFromProps({ visible }) {
      if (typeof visible === "undefined") {
        setInterval(
          AsyncStorage.getItem("loginJWT").then(result => {
            if (result !== null) {
              result = JSON.parse(result);
              fetch(serverUrl + "/api/getUnreadNotificationsCount", {
                method: "GET",
                headers: {
                  Authorization: "Bearer " + result.data.jwt
                }
              })
                .then(e => e.json())
                .then(function(response) {
                  if (response.status === "1") {
                    if (response.msg > 0) {
                      AsyncStorage.setItem(
                        "unreadNotification",
                        JSON.stringify(response.msg)
                      );
                    } else {
                      AsyncStorage.setItem("unreadNotification", 0);
                    }
                  }
                })
                .catch(error => {
                  alert(error);
                  // console.error(error, "ERRRRRORRR");
                });
            } else {
              AsyncStorage.setItem("unreadNotification", 0);
            }
          }),
          5000
        );
        return null;
      }
      return { modalVisible: visible };
    }

    handleOpenModal = () => {
      this.setState({ modalVisible: true });
    };

    handleCloseModal = () => {
      const { handleFail } = this.props;
      this.setState({ modalVisible: false }, handleFail);
    };

    render() {
      const { modalVisible } = this.state;
      const { theme } = this.props;

      return (
        <View>
          <Modal
            animationType={animationType ? animationType : "fade"}
            transparent={true}
            visible={modalVisible}
            onRequestClose={this.handleCloseModal}
          >
            <View style={themes[theme] ? themes[theme] : themes.transparent}>
              <OriginalComponent
                handleCloseModal={this.handleCloseModal}
                {...this.props}
              />
            </View>
          </Modal>
        </View>
      );
    }
  };

Answer 1

我没有使用getDerivedStateFromProps，但是according to the docs是在初始组件安装时以及每次渲染更新之前调用的。

因此，您的代码在每次更新时都会创建一个新的间隔计时器，而不会清除任何较早的计时器，这可能会导致某种竞争状况。

您可能要考虑使用文档中列出的更简单的替代方法，或者至少要确保在创建新间隔之前取消间隔。

反应本机setInterval无法读取属性适用

1 个答案: