Реагировать JSON получить значение

Question

Я новичок, чтобы отреагировать и начал изучать данные JSON. Для тестирования я использую: https://randomuser.me/api/?results=5

То, чего я пытаюсь добиться, - это когда я нажимаю на имя пользователя из json, оно будет консоль записывать имя пользователя. Как передать значение из json в консольный журнал?

const API = 'https://randomuser.me/api/?results=5';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logins: [],
    };
  }

  componentDidMount() {
    fetch(API)
      .then(response => response.json())
      .then(data => {
        let logins = data.results.map((uname) => {
          return (
            <div>
              <button>{uname.login.username}</button>
            </div>
          )
        })
        this.setState({logins: logins});
      })
  }

  render() {
    return (
      <div>
        {this.state.logins}
      </div>
    );
  }
}

Это хорошая идея, чтобы вернуть HTML-код в componentDidMount, или я должен оставить его для визуализации?

Answer 1

На самом деле вы можете делать все, что хотите, но для чтения / использования было бы лучше иметь все html на рендере.поэтому изменение вашего кода должно выглядеть так:

const API = 'https://randomuser.me/api/?results=5';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logins: [],
    };
  }

  componentDidMount() {
    fetch(API)
      .then(response => response.json())
      .then(data => {
        let logins = data.results.map((uname) => {
          return uname.login.username;
        })
        this.setState({logins: logins});
      })
  }

  render() {
    return (
      <div>
      {
          this.state.logins.map(u=> {
              <div>
                  <button>{u}</button>
              </div>
          })
      }
      </div>
    );
  }
}

Answer 2

Вы можете делать то, что вам нравится, но обычно вы оставляете создание компонента (это не совсем HTML) на render:

const API = 'https://randomuser.me/api/?results=5';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logins: [],
    };
  }

  componentDidMount() {
    fetch(API)
      .then(response => response.json())
      .then(data => {
        this.setState({logins: data.results});
      })
  }

  render() {
    return (
      <div>
        {this.state.logins.map((uname) => (
            <div>
              <button>{uname.login.username}</button>
            </div>
        ))}
      </div>
    );
  }
}

state обычно должно содержать данные и оставьте отображение этих данных на render.

---

Примечание: в вашем вызове fetch отсутствуют две вещи:

1. Чекдля статуса ok и

2. Обработчик ошибок

   fetch(API)
     .then(response => {                             // ***
       if (!response.ok) {                           // ***
         throw new Error({status: response.status}); // ***
       }                                             // ***
     })                                              // ***
     .then(response => response.json())
     .then(data => {
       // ...
     })
     .catch(err => {                                 // ***
       // Handle the error                           // ***
     });                                             // ***
   

fetch не отклоняет ошибки состояния, такие как 404.