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

Question

我正在为我的 react 应用程序使用 redux。我正在从 api 获取用户数据，用它更新 redux 状态并将其显示到我的组件中。数据是对象列表。导致我出现问题的原因是设置 redux 初始状态。

Reducer 初始状态：

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

您不应该像这样通过用户的位置来呈现用户。要么迭代所有用户，要么研究规范化数据

<div>
  {users.map(user) => (
    <div>{users.name}</div>
  )}
</div>

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

Answer 3

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

Answer 4

你提到你的对象结构

{name: "", age: ""}

然后你提到如何访问users.name.firstname。如果您收到undefined，则表示您的 dara 尚未加载到您的用户数组中。因此，使用一个空数组进行实例化，例如 users:[] 并添加以下内容：

const YourComponent = (props) => {
  if (users.length === 0){
    return <div> Loading </div>
  }
  return(
    <div>
      {users.map(user => 
        <div>
          {user.name}
        </div>  
      )}
    </div>
  )
}

您的组件将在您的数组被填充之前加载，并将返回 Loading div。当数组被填充时，组件将重新渲染并映射出你的数组。