React json get value
Я новичок в реакции и начал изучать данные 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 или я должен оставить его для рендеринга?
А что касается первого вопроса: «Как передать значение из json в журнал консоли?» - вы можете передать в console.info весь JSON или конкретное поле с помощью оператора точки. console.info очень умно печатает целые объекты JSON
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 не хватает двух вещей:
Проверка статуса
okиОбработчик ошибок
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.
На самом деле вы можете делать все, что хотите, но для чтения / использования было бы лучше, чтобы на рендере был весь 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>
);
}
}
Нет, уберите HTML-код с
componentDidMount().