Не могу разобраться в последовательности работы приложения, скорее с последовательностью изменения состояния. Приложение дублирует функционал работы сообщений в сети VK и основано соответственно на его API. Работает через wrapper 'vk-sdk' Нужно отображение входящих сообщений из группы в ВК в админке сайта с возможностью ответа. Код приложения:
import vk from 'vk-sdk'
import React from 'react'
import ReactDOM from 'react-dom'
const url="api-url";
vk.setToken('мой-токен-ВК');
class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
mes:[],
value:'',
};
};
componentDidMount(){
fetch(url).then(function(response){
return response
}).then(function (response) {
return response.json()
}).then((data)=>{
this.setState({mes:data})
})
}
handleChange(event) {
this.setState({value: event.target.value});
}
subFunction(props) {
const id=props.user_id;
vk.callMethod('messages.send', {
user_id: id,
message: this.state.value
})
.then(function (response) {
console.log('Success: ' + JSON.stringify(response));
})
.catch(function (error) {
console.log('Fail: ' + JSON.stringify(error));
});
}
render() {
return (
<div className="mp_dt_vk_list_mes_wr">
{this.state.mes.map((index)=>
(
<div className="vk_message_wrap" key={index.message_id}>
<div className="vk_info_wr">
<div className="vk_image">
<img className="circle" src={index.image_url}>
</img>
</div>
<div className="vk_mes_username_wr">
{index.last_name}
{index.first_name}
</div>
</div>
<div className="vk_content">
<div className="vk_mes_date">
{index.message_date}
</div>
<div className="vk_title">
{index.message_title}
</div>
<div className="vk_body">
{index.message_body}
</div>
<form className="col s12">
<div className="row">
<div className="input-field col s12">
<textarea id="textarea1" className="materialize-textarea" value={this.state.value} onChange={this.handleChange.bind(this)}/>
<label htmlFor="textarea1">
Ответ
</label>
</div>
</div>
<button className="vk_mess_button btn waves-effect waves-light blue darken-3" onClick={this.subFunction.bind(this,index)}>
Отправить
</button>
</form>
</div>
</div>
)
)
}
</div>
);
}
}
ReactDOM.render(<Message/>, document.getElementById('containercustom'));
При обработке componentDidMount я получаю список всех сообщений, далее передаю их в Message через map c выводом названия, даты, имя пользователя и т.д. После ввода ответа в textarea, по нажатию на кнопку должна отрабатывать функция subFunction, которая отправляет ответ через метод send.messages. И вот здесь возникает загвоздка - метод не отрабатывает или же запрос проходит через раз. После нескольких нажатий, возможна отправится одно сообщение, либо вообще ничего не происходит. Проверял работает ли метод, если его вызвать с этими же параметрами, но отдельно, если оставить одну кнопку и обрабатывать событие нажатия - все работает отлично. Я подозреваю, что причина в работе с состоянием компонента - при нажатие на кнопку происходит ререндер компонента, возможно запрос при этом не осуществляется.
Кто нибудь мог бы мне объяснить в чем причина такого поведения и где я ошибаюсь.
Средний
