Как установить исходное состояние для массива объектов?

Question

Я использую избыточность для своего приложения реакции.Я извлекаю пользовательские данные из API, обновляю с их помощью избыточное состояние и показываю их в свой компонент.Данные - это список объектов.Проблема, которая вызывает у меня проблемы, - это установка начального состояния избыточности.

Начальное состояние редуктора:

const initState = {
    users: []
}

Действие редуктора

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

Визуализация в компоненте

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

При первом рендеринге я получаю сообщение об ошибке.читать из неопределенного свойства.Это потому, что при первом рендеринге данные еще не сохранены, а объект с таким свойством еще не существует.Я могу решить это, если я установлю начальное состояние как:

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

В этом случае объект со свойством будет существовать, и я не получу ошибку.Но я не знаю, сколько у меня будет объектов, и я не хочу устанавливать начальное состояние для каждого из них и их свойств.Так как же правильно его настроить?

Answer 1

Вы упоминаете свою структуру объекта

{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>
  )
}

Ваш компонент загрузится до того, как ваш массив будет заполнен, и вернет Div загрузки.Когда массив будет заполнен, компонент будет перерисован и отобразит ваш массив.

Answer 2

Я бы использовал пустой массив и проверил бы свойство [] .length перед рендерингом.

Answer 3

Вы не должны отображать пользователя по его позиции.Либо вы перебираете всех пользователей, либо изучаете нормализацию ваших данных

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

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

Answer 4

Просто проверьте, присутствует ли он, и визуализируйте условно

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