react-native - 在 FlatList 中设置状态

Question

我正在创建具有多个状态对象的简单组件我想通过 FlatList 内部设置状态值但原因是当运行代码时单击我正在调用回调函数的按钮页面变为空白然后出现错误

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

const SquareScreen = () =>{
    const [Colors,SetColors] = useState([
        {
            Name : 'Red',
            Value : 0
        },
        {
            Name : 'Green',
            Value : 0
        },
        {
            Name: 'Blue',
            Value : 0
        }
    ]);

    return(
        <View>
            <FlatList keyExtractor={Key => Key.Name} data={Colors} renderItem={({item}) => {
                return (

                    <ColorCounter OnIncrease={() => {SetColors(item.Value + 1)}} OnDecrease={() => {SetColors(item.Value - 1)}} Name={item.Name} />
                );
            }}/>
        </View>
    );
};

标签： react-nativecomponentsstatereact-native-flatlist