反应原生 - '未定义不是对象'？

Question

好吧，离开这个答案React native - “this.setState is not a function”试图为背景颜色设置动画？我只是想在 React Native 中循环淡化视图的背景颜色。

export default props => {

  let [fontsLoaded] = useFonts({

    'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',

        'SequelSans-RomanDisp' : require('./assets/fonts/SequelSans-RomanDisp.ttf'),

        'SequelSans-BoldDisp' : require('./assets/fonts/SequelSans-BoldDisp.ttf'),

        'SequelSans-BlackDisp' : require('./assets/fonts/SequelSans-BlackDisp.ttf'),

  });

  //Set states and hooks

  //To change state 'color' - setColor('#ff0000');

  const colors = ["#fff", "#ff0000", "#00ff00", "#0000ff", "#0077ff"];

  const [color, setColor] = useState("#fff");

  const [backgroundColor, setBackgroundColor] = useState(new Animated.Value(0));

  const [time, setTime] = useState(0);

  //const t = colors[randNum(0, colors.length)];

  //random num, exclusive

  function randNum(min, max) {

    return Math.floor(min + Math.random() * (max - min));

  }

  useEffect(() => {

    setBackgroundColor(new Animated.Value(0));

  }, []); // this will be only called on initial mounting of component,

  // so you can change this as your requirement maybe move this in a function which will be called,

  // you can't directly call setState/useState in render otherwise it will go in a infinite loop.

  useEffect(() => {

    Animated.timing(backgroundColor, {

      toValue: 100,

      duration: 5000

    }).start();

  }, [backgroundColor]);

  var bgColor = this.state.color.interpolate({

    inputRange: [0, 300],

    outputRange: ["rgba(255, 0, 0, 1)", "rgba(0, 255, 0, 1)"]

  });

  useEffect(() => {

    const interval = setInterval(() => {

      //setTime(new Date().getMilliseconds());

      setColor("#ff0000");

    }, 36000);

    return () => clearInterval(interval);

  }, []);

有了这个，一切都会检查出来，除了var bgColor = this.state.color会产生错误

undefined 不是评估的对象..

我不明白为什么这是一个问题，因为我将颜色设置为useState('#fff')我想color在我的样式表中使用为backgroundColor.

如何正确设置？

Answer 1

如果你的组件是一个你不应该使用的函数this.state.，但你必须直接调用状态名称。在您的代码中：var&nbsp;bgColor&nbsp;=&nbsp;color.interpolate({...})代替：var&nbsp;bgColor&nbsp;=&nbsp;this.state.color.interpolate({...})从反应文档阅读状态当我们想在一个类中显示当前计数时，我们读取 this.state.count：<p>You clicked {this.state.count} times</p>在函数中，我们可以直接使用count：<p>You clicked {count} times</p>

Answer 2

这是一个示例，不要为动画值创建状态，而是使用备忘录对其进行一次初始化并使用计时功能对其进行更新小吃：https ://snack.expo.io/GwJtJUJA0代码：export default function App() {&nbsp; const { value } = React.useMemo(&nbsp; &nbsp; () => ({&nbsp; &nbsp; &nbsp; value: new Animated.Value(0),&nbsp; &nbsp; }),&nbsp; &nbsp; []&nbsp; );&nbsp; React.useEffect(() => {&nbsp; &nbsp; Animated.loop(&nbsp; &nbsp; &nbsp; Animated.sequence([&nbsp; &nbsp; &nbsp; &nbsp; Animated.timing(value, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; toValue: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: 1000,&nbsp; &nbsp; &nbsp; &nbsp; }),&nbsp; &nbsp; &nbsp; &nbsp; Animated.timing(value, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; toValue: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: 1000,&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; ])&nbsp; &nbsp; ).start();&nbsp; }, []);&nbsp; const backgroundColor = value.interpolate({&nbsp; &nbsp; inputRange: [0, 1],&nbsp; &nbsp; outputRange: ['#0dff4d', '#ff390d'],&nbsp; });&nbsp; return (&nbsp; &nbsp; <View style={styles.container}>&nbsp; &nbsp; &nbsp; <Animated.View style={{ width: 200, height: 100, backgroundColor }} />&nbsp; &nbsp; </View>&nbsp; );}

Answer 3

在功能组件中，您不使用 访问组件的状态属性/变量this.state.abc，而是直接使用状态变量的名称。所以你应该做的是：&nbsp; &nbsp; var bgColor = color.interpolate({&nbsp; &nbsp; &nbsp; inputRange: [0, 300],&nbsp; &nbsp; &nbsp; outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']&nbsp; &nbsp; });