Flatlist 不呈现对象数组

Question

大家好，我正在尝试呈现一个对象列表以呈现一些字母，这些字母取自自定义键盘。我的 flatlist 看起来像这样：

<FlatList
horizontal={true}
data = {keyList}
renderItem = {({item}) => 
    <View style={styles.singleBlock}>
        <Text style={styles.textBlock}>{item.letter}</Text>
    </View>
    }
keyExtractor = {myKey}
/>

数据取自我所在的州：

    const [keyList, setKeyList] = useState([
        {
            'letter': "",
            'state': "nonIndovinato",
            'id': 1
        },
        {
            'letter': "",
            'state': "Indovinato",
            'id': 2
        },
        {
            'letter': "",
            'state': "Indovinato",
            'id': 3
        },
        {
            'letter': "",
            'state': "Indovinato",
            'id': 4
        },
        {
            'letter': "",
            'state': "Indovinato",
            'id': 5
        }
    ]);

并通过更新函数更新：

    const updateData = (key) => {
        const index = keyList.findIndex(item => item.id === key.id);

        if(index === -1) return;

        const item = keyList[index];

        const updatedItem = {...item, letter: key.letter};

        const updatedArray = keyList;

        updatedArray[index] = updatedItem;

        setKeyList(updatedArray);
    };

键值如下：

{
    'letter': 'A',
    'id': 1
}

我用 console.log 看到的数据是正确的，例如，如果我按 T 它看起来像这样：

{letter: 'T', state: 'nonIndovinato', id: 1},
{letter: '', state: 'Indovinato', id: 2},
{letter: '', state: 'Indovinato', id: 3},
{letter: '', state: 'Indovinato', id: 4},
{letter: '', state: 'Indovinato', id: 5}

应用程序如下所示：https://i.stack.imgur.com/JhQiq.jpg 上半部分是应该显示数据的结构，下半部分是模型数据的预期结果。

如果您需要样式：

    singleBlock: {
        backgroundColor: 'grey',
        width: width/6,
        justifyContent: 'center',
        alignItems: 'center',
        margin: 1,
        marginTop: '5%',
        marginBottom: '5%',
        marginRight: 2,
        borderRadius: 1
    },
    textBlock: {
        color: 'white',
        fontSize: width/10,
        fontWeight: 'bold'
    }

感谢任何能提供帮助的人:)

Answer 1

您更新状态的方式不正确。请尝试以下操作。

const updateData = (key) => {
        const index = keyList.findIndex(item => item.id === key.id);

        if(index === -1) return;

        const item = keyList[index];
        const updatedItem = {...item, letter: key.letter};


        let updatedArray = [...keyList];
        updatedArray[index] = updatedItem;
        
        setKeyList(updatedArray);
};

Flatlist 不呈现对象数组

Flatlist doesn't render an array of Objects

react-native

react-hooks

rxjs

react-native-flatlist