Question

我一直在努力学习有关本机的udemy教程。我陷入了这个错误，如iPhone图片上所示。我的应用程序代码如下：当我转到该文件时，该错误显示在应用程序上

import React, { useReducer } from 'react' ;
import {View, StyleSheet, Text, FlatList} from 'react-native';
import ColorCounter from '../components/ColorCounter';

const COLOUR_COUNT = 15 ;

const reducer = (state, action)  => {

  switch (action.colorToChange) {
      case 'red':
         return { ...state, red: state.red + action.amount };
      case 'green':
        return { ...state, green: state.green + action.amount };
      case 'blue':
        return { ...state, blue: state.blue + action.amount }; 
      default:
        return state ;
   }
};

const SquareScreen = () => {

    const [state, dispatch] = useReducer(reducer, {red: 0, green: 0, blue: 0}) ;
    const [red, green, blue] = state ;

    return ( <View>
     <ColorCounter
     onIncrease={() => 
        dispatch ({ colorToChange: 'red', amount: COLOUR_COUNT}) }
     onDecrease={() => 
        dispatch ({ colorToChange: 'red', amount: -1 * COLOUR_COUNT }) } 
     color="Red" 
     />
     <ColorCounter 
     onIncrease={() => 
        dispatch ({ colorToChange: 'blue', amount: COLOUR_COUNT}) } 
     onDecrease={() => 
        dispatch ({ colorToChange: 'blue', amount: -1 * COLOUR_COUNT })}
     color="Blue"/>
     <ColorCounter 
     onIncrease={() => 
        dispatch ({ colorToChange: 'green', amount: COLOUR_COUNT})} 
     onDecrease={() => 
        dispatch ({ colorToChange: 'green', amount: -1 * COLOUR_COUNT })}
     color="Green" />

     <View
       style={{
         height: 150,
         width: 150,
         backgroundColor: `rgb(${red}, ${green}, ${blue})`  
       }}
       />

    </View>
  );
};

const styles = StyleSheet.create({}) ;

export default SquareScreen;

我转到此代码时出现的错误消息图像如下：

React error message

Answer 1

更正此内容：

const [state, dispatch] = useReducer(reducer, {red: 0, green: 0, blue: 0}) ;
const {red, green, blue} = state ;

第一行是数组的解构，第二行是一个对象。

无法了解我的应用程序上的React-native错误

1 个答案: