Flatlist 不渲染对象数组

Question

大家好，我正在尝试渲染一个对象列表来表示从自定义键盘中获取的一些字母。我的平面列表看起来像这样：

<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.sstatic.net/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);
};