Проблемы при получении данных API в моем компоненте реакции

Question

У меня есть json файл:

{"area":[{"id":"1","name":"abc","address":"223 "},{"id":"2","name":"xyz","address":"123 "}]

Как получить данные с использованием реакции и редукции в моем компоненте?

Я загрузил URL-адрес с помощью редукса, я могу чтобы увидеть данные в моей консоли, но не на странице пользовательского интерфейса.

Действия. js

const apiURL = 'my/api/goes/here';

export const fetchUsers = () => dispatch => {
  axios
    .get(apiURL)
    .then(dispatch(fetchUsersBegin()))
    .then(resp =>
      setTimeout(() => {
        dispatch(fetchUsersSuccess(resp.data));
      }, 1000)
    )
    .catch(err => dispatch(fetchUsersFailure()));
};

Компонент. js

render() {
    const { error, loading, items } = this.props;
    console.log(items);

    return (
      <div>
        <h1> Result</h1>
        {items.area}
        {Object.keys(items).map(arr => {
          return (
            <div>
              Id is : {arr[1].id} 
            </div>
          )`
        })}
      </div>
    );
  }
}

Answer 1

Таким образом, в функции render отображаются данные, представленные в console.log(). Я думаю, проблема в том, что вы пытаетесь отобразить массив, который возвращает только ['area'].

См. Результат ниже:

const items = {
  "area": [{
      "id":"1","name":"abc","address":"223 "
    }, {
      "id":"2","name":"xyz","address":"123 "
    }
  ]
};

console.log(Object.keys(items));

Вместо этого попробуйте сделать map() на items.area, где каждый элемент содержит id следующим образом:

{
   items && items.area.map(e => {
       return (
          <div>
             Id is : {e.id}
          </div>
       )
   })
}

Объяснение :

Технически, вы вызываете map() в массиве items.area, который дает вам каждый элемент, пока вы выполняете итерацию по массиву. Сделав это, вы можете получить необходимые свойства взамен.

items && используется, чтобы проверить, содержит ли items значение, если это так, он отображает массив items.area в вашей функции render .

Подробнее читайте здесь: Array.prototype.map()

Надеюсь, это поможет!