Я пытаюсь получить значения из API в реакции js Я использую топор ios Метод get, чтобы получить ответ от API. Я хочу, чтобы мой компонент отображал строку при нажатии кнопки, которую он должен отправить На сервере API есть некоторые параметры, которые должны быть отправлены по запросу, но я не могу понять, как разместить эти параметры, кроме этого, мой вопрос также не отображается, используя идентификатор пользователя в качестве конечной точки, и он проверяет, есть ли идентификатор в локальной сети. хранения, чем отображает вопрос. Пожалуйста, скажите мне, как я могу отобразить этот вопрос на экране и как я могу написать ответное тело сообщения. Мой код
import React, { Component } from 'react';
import Axios from 'axios'
import ReactDOM from "react-dom";
import { HotKeys } from "react-hotkeys";
class Questionare extends Component {
constructor(props) {
super(props);
this.state = {
seconds: 3,
color: null,
items: [],
currentItem: [],
index: 0,
}
this.handleChange = this.handleChange.bind(this);
this.keyMap = {
DONT_APPLIES:[ "a","A"],
APPLIES:["s","S"],
STRONGLY_APPLIES:["d","D"],
};
this.handlers = {
DONT_APPLIES: (e) => {
this.keyPressed();
},
APPLIES: (e) =>{
this.keyPressed1();
},
STRONGLY_APPLIES: (e) =>{
this.keyPressed2();
}
};
}
async keyPressed(e) {
const { index, items} = this.state;
const nextQuestion = index + 1;
this.setState({ currentItem: items[nextQuestion], index: nextQuestion,})
await store.dispatch(Personality.Post(items))
console.log(this.state)
}
async keyPressed1(e) {
const { index, items} = this.state;
const nextQuestion = index + 1
this.setState({ currentItem: items[nextQuestion], index: nextQuestion,})
await store.dispatch(Personality.Post(items))
console.log(this.state)
}
async keyPressed2(e) {
const { index, items} = this.state;
const nextQuestion = index + 1;
this.setState({ currentItem: items[nextQuestion], index: nextQuestion,})
await store.dispatch(Personality.Post(items))
console.log(this.state)
}
handleChangeColor = (newColor) => {
this.setState({
color: newColor,})
}
componentDidMount() {
this.myInterval = setInterval(() => {
const { seconds} = this.state
if ( seconds> 0 ) {
this.setState(({ seconds }) => ({
seconds: seconds -1
}))
} else if (seconds==0) {
return(this.handleChangeColor('#840000'))
}
}, 1000)
Axios.get('http://leaty-dev.azurewebsites.net/api/services/app/PersonalityQuestioner/GetNextPersonalityQuestionerOfUser?uId='+ JSON.parse( localStorage.getItem( "userId" ) )
)
.then(response => {
console.log(response);
this.setState({ items: response.data.result.items, currentItem: response.data.result.items[0], index: 0});
})
.catch(error => {
console.log(error);
});
}
componentWillUnmount() {
clearInterval(this.myInterval)
}
handleChange(e) {
this.props.history.push('/test')
}
render() {
const { seconds } = this.state
const timebox= {
width: '50px',
height: '20px'
}
const { currentItem, items } = this.state;
return (
<HotKeys keyMap={this.keyMap} handlers={this.handlers} >
<div id="wrapper" class="myleaty">
<div class="myleaty-holder">
<div class="container">
<div style={ { background: this.state.color} } class="myleaty-box">
<div style= {timebox}>
<h2>{seconds}</h2>
</div>
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="leaty"/>
</a>
</div>
<p key={items.id}>{items.pqDetail}</p>
<div class="btn-row">
<button className="btn btn1" >Does not Applies</button>
<button className="btn" >Applies</button>
<button className="btn btn1" >Strongly Applies</button>
</div>
</div>
</div>
</div>
</div>
</HotKeys>
);
}
}
export default Questionare
Мой API 