无法呈现 FlatList

Question

我正在尝试渲染 FlatList，但我没有在屏幕上看到它

我通过控制台日志获取 Reducer 的数据，在控制台中我获取了正确的数据：

User {
  "apellido": "Alas",
  "correo": "prueba@uno.com",
  "id": 2021-02-08T23:52:58.855Z,
  "nombre": "Rene",
  "telefono": "72457183",
}

这是我的代码：

import React from "react";
import { View, Text, FlatList, StyleSheet } from "react-native";
import { useSelector } from 'react-redux';

import UserItem from "../components/UserItem";

export default function Page2() {
    const users = useSelector(state => state.registro.availableUsers);

    console.log(users);

    if (users.length === 0) {
        return <View style={styles.centered} >
            <Text>No Existen Usuarios</Text>
        </View>
    }

    return (
        <FlatList
        data={users}
        keyExtractor={item => item.id.toString()}
        renderItem={
            itemData => <UserItem
                nombre={itemData.item.nombre}
                apellido={itemData.item.apellido}
                telefono={itemData.item.telefono}
                coreo={itemData.item.coreo}
                onSelect={() => { }}
            />
        }
    />
    )
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f9fafd',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    }
});

如您所见，控制台日志显示正在从 Reducer 接收数据，但没有通过 FlatList 显示任何数据

如图所示

我尝试使用 MAP 函数获得相同的结果（呈现列表）但仍然出现错误：

TypeError: undefined is not a function (near '...users.map...')

虽然我知道不应该有一个未定义的，因为它打印到控制台

有什么想法吗？

PS。我认为问题可能出在 Action 或 Reducer 上：

动作

//Import Model
import { createStore } from 'redux';
import User from '../../models/user';

//Constant Creation 
export const REGISTER = 'REGISTER';

export const createUser = (nombre, apellido, telefono, correo) => {
    return async (dispatch) => {
        console.log('entra a fun');
        try{
            console.log('antes de crear');
            const createdUser = new User(new Date(), nombre, apellido, telefono, correo);
            console.log('despues de crear');
            console.log(createUser);

            dispatch({type: REGISTER, user: createdUser});
        }
        catch (err) {
            throw err;
        }
    }
};

减速器

import { REGISTER } from '../actions/registro';

const initialState = {
    availableUsers: [],
}

export default (state = initialState, action) => {
    switch (action.type) {
        case REGISTER:
            return {
                ...state,
                availableUsers: action.user,
            };
    }
    return state;
};

Answer 1

您的可用用户只是获得一个用户，而不是 updating/appending 新用户。

export default (state = initialState, action) => {
    switch (action.type) {
        case REGISTER:
            return {
                ...state,
                availableUsers: [...state.availableUsers, action.user],
            };
    }
    return state;
};

通过传播 (...) state.availableUsers，您可以将新用户追加到现有数组的末尾。

无法呈现 FlatList

Unable to Render a FlatList

javascript

react-native

react-native-flatlist