如何设置Redux的初始状态为对象的数组？

Question

我使用终极版为我的反应的应用。我从API获取用户数据，更新Redux的状态，并将其显示在我的组件。数据是对象列表。导致我出现问题的是设置redux初始状态。

减速器初始状态：

const initState = {
    users: []
}

减速器动作

case 'GET_USERS':
    return {
        users: action.users
    }
});

在组件中渲染

{this.props.users[1].name}

在第一渲染我收到错误不能从未定义的属性读取。这是因为第一次渲染数据尚未存储，并且具有该属性的对象尚不存在。如果我将初始状态设置为：

const initState = {
    users: [
        {name: "", age: ""},
        {name: "", age: ""}
    ]
}

在那种情况下，具有属性的对象将存在，而我不会出错。但我不知道有多少对象我会，我不希望设置初始状态为每一个他们和他们的属性。那么正确设置它的方法是什么？

Answer 1

只需检查它是否存在并有条件渲染

{this.props.users.length > 1 ? this.props.users[1].name : 'Not enough elements!'}

Answer 2

您不应通过这样的位置来呈现用户。您可以迭代所有用户，也可以考虑对数据进行规范化

 ref = cordova.InAppBrowser.open('https://google.nl/', '_blank', 'clearsessioncache=yes, clearcache=yes');

https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape

Answer 3

我将使用一个空数组，并在渲染之前检查[] .length属性。

Answer 4

您提到了对象结构

function.json

，然后提到如何访问{name: "", age: ""} 。如果得到users.name.firstname，则表示您的dara尚未加载到用户数组中。因此，请使用诸如undefined之类的空数组实例化并添加以下内容：

users:[]

您的组件将在填充数组之前加载，并返回Loading div。数组填充完毕后，组件将重新渲染并映射出数组。