Попытка сохранить массив объектов json в состоянии, затем отобразить элементы в рендер

Question

Я новичок, чтобы отреагировать.

Я пытаюсь сохранить массив объектов json в состоянии, затем сопоставить элементы с компонентом рендеринга.

Я не уверен, как отладить этот /Также нет ошибок консоли: /

https://codepen.io/bkdigital/pen/XWrLrxX?editors=1111

class App extends React.Component {
state = {
   users: [],
   isLoading: true,
   errors: null
};

getUsers() { 
axios.get("REMOVED")
  .then(response =>
    response.data.results.map(user => ({
      name: `${user.Id}`,
      Company: `${user.Company}`,
    }))
  )
  .then(users => {
    this.setState({
      users,
      isLoading: false
    });
  })
  .catch(error => this.setState({ error, isLoading: false }));
}

componentDidMount() {
   this.getUsers();
}

render() {
const { isLoading, users } = this.state;
return (
  <React.Fragment>
    <h2>Random User</h2>
    <div>
      {!isLoading ? (
        users.map(user => {
          const { Company, Id } = user;
          return (
            <div key={Id}>
              <p>{Company}</p>
              <hr />
            </div>
          );
        })
      ) : (
        <p>Loading...</p>
      )}
    </div>
  </React.Fragment>
  );
 }
} 

ReactDOM.render(<App />, document.getElementById("root"));

Название компании должно быть отображено.

Answer 1

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

Замените этот код:

.then(response =>
    response.data.results.map(user => ({
      name: `${user.Id}`,
      Company: `${user.Company}`,
    }))
  )

на

.then(response => {
    console.log(response);
    return response.data.results.map(user => ({
      name: `${user.Id}`,
      Company: `${user.Company}`,
    }))
  })

И проверьте объект ответа в вашей консоли.

Обновление

Ваш код должен выглядеть следующим образом (когда плагин CORS включен или ваш сервер и клиент настроены так, что ошибки CORS нет):

.then(response => 
  response.data.map(user => ({
      name: `${user.Id}`,
      Company: `${user.Company}`,
    }))
  )

Answer 2

С консоли:

 Cross-Origin Request Blocked:
 The Same Origin Policy disallows reading the remote resource at   https://www.abenzymes.com/umbraco/api/careers/getcareers?siteid=13930.
 (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Вам необходимо добавить заголовок CORS к вашему запросу, и Cors также должны быть включены на сервере. Ссылки, которые могут помочь:

• https://github.com/axios/axios/issues/853

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 3

Код работает как написано. Вам просто нужно обработать состояние error.

В настоящее время возникает ошибка при выполнении вызова axios:

{"config": {"transformRequest": {}, "transformResponse": {}, "тайм-аут": 0, "xsrfCookieName": "XSRF-ЗНАК", "xsrfHeaderName": "X-XSRF-ЗНАК", "maxContentLength": - 1, "заголовки":{"Accept": "application / json, text / plain, / "}, "method": "get", "url": "https://www.abenzymes.com/umbraco/api/careers/getcareers?siteid=13930"},"request":{}}

Youможно увидеть, отобразив его рядом с h2:

render() {
const { isLoading, users, error } = this.state;
return (
  <React.Fragment>
    <h2>Random User {JSON.stringify(error)}</h2>
    <div>
      {!isLoading ? (
        users.map(user => {
          const { Company, Id } = user;
          return (
            <div key={Id}>
              <p>{Company}</p>
              <hr />
            </div>
          );
        })
      ) : (
        <p>Loading...</p>
      )}
    </div>
  </React.Fragment>
  );
 }
}