React Native - 如何每 x 毫秒重新渲染一个组件？ “this.setState 不是函数？”

Question

好的，我尝试每 x 毫秒更新一次组件的属性和/或文本。我深入了解https://www.npmjs.com/package/react-interval-renderer 之类的，但是我遇到了与 s 有关的错误。

我现在只是查看react native (IOS). how to update value date (millisecond)，但是我无法将其格式化为我的文件。

我有：

export default props => {
  let [fontsLoaded] = useFonts({
    'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
  });

  this.state ={
   color: "#fff",
   colorAnimTime: 36000,
   time: 0
  }

    setInterval(() => {
      this.setState({
        time: new Date().getMilliseconds()
      });
    }, 1000);


//------------------------------------------------------------------->
  if (!fontsLoaded) {
    return <AppLoading />;
  } else {

    const styles = StyleSheet.create({
      container: { flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
      textWrapper: {
        height: hp('70%'), // 70% of height device screen
        width: wp('80%'),   // 80% of width device screen
        justifyContent: 'center',
        alignItems: 'center',
      },
      myText: {
        fontSize: hp('5.5%'), // End result looks like the provided UI mockup
        fontFamily: 'SequelSans-BlackDisp'
      }
    });

      return (
        <AnimatedBackgroundColorView
        color='#00acdd'
        delay={0.5}
        duration={36000}
        initialColor={this.state.color}
        style={styles.container}>
          <View style={styles.textWrapper}>
            <Text style={styles.myText}>COLOR</Text>
          </View>
        </AnimatedBackgroundColorView>
      );
  }

引用的答案使用componentDidMount() { 将setInterval 括起来，但是如果我把它放在我目前拥有setInterval 的地方会出现语法错误

现在我得到了

this.setState 不是函数

并尝试将setInterval 绑定到右侧this，但我相信我不明白如何设置我的文件。

1000 毫秒后，我想更改 <AnimatedBackgroundColorView> 的“颜色”并重新加载组件。 （所以它再次动画 - https://www.npmjs.com/package/react-native-animated-background-color-view）

我该怎么做？

Answer 1

您的组件被编写为功能组件，而不是类。要创建有状态的功能组件，您需要使用钩子setState。您会收到此错误，因为组件或 this 上没有对象属性 setState。您还需要使用 useEffect 挂钩来设置间隔。

https://reactjs.org/docs/hooks-reference.html

import React, { useState } from 'react';

export default props => {
  let [fontsLoaded] = useFonts({
    'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
  });

  const color = "#fff";
  const colorAnimTime = 36000;
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date().getMilliseconds));
    }, 1000);
    return () => clearInterval(interval);
  }, []);


//------------------------------------------------------------------->