Javascript 反应本机-'；未定义不是对象'；？

好的，离开这个答案，我只是想在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不是正在计算..的对象

我不明白为什么这是一个问题，因为我将color设置为

useState（'#fff'）

我想在样式表中将

color

用作

backgroundColor

---

如何正确设置此选项？

如果您的组件是一个函数，则不应使用

此.state.

，但必须直接调用状态名称

在代码中：

var bgColor = color.interpolate({...})

而不是：

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

从反应

读取状态

当我们想在类中显示当前计数时，我们 请阅读此.state.count：

您单击了{this.state.count}次

在函数中，我们可以 直接使用计数：

您单击了{count}次

---

下面是一个示例：不要为动画值创建状态，而是使用memo对其进行一次初始化，并使用计时功能进行更新

小吃：

代码：

导出默认函数App（）{
常量{value}=React.useMoom(
() => ({
值：新动画。值（0），
}),
[]
);
React.useffect（（）=>{
动画循环(
动画序列([
动画。计时（值{
toValue:1，
持续时间：1000，
}),
动画。计时（值{
toValue:0，
持续时间：1000，
})
])
).start（）；
}, []);
const backgroundColor=value.interpolate({
输入范围：[0，1]，
输出范围：['0dff4d'，'ff390d']，
});
返回(
);
}

在功能组件中，您不能使用this.state.abc访问组件的状态属性/变量，而是直接使用状态变量的名称。所以你应该做的是：

var bgColor = color.interpolate({
  inputRange: [0, 300],
  outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
});

---

我知道直接访问功能组件状态的颜色不是react doc中的this.state.color。我只想说。谢谢

var bgColor = color.interpolate({
  inputRange: [0, 300],
  outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
});