Имеется кусок кода на реакте. Там где звёздочки проблема. Состояние кнопки обновляется только при обновлении страницы. setState не совсем подходит, т.к. из мапы видно, что если использовать setState то приментся ко всем элементам. Какое решение может быть?
this.props.requestStore.requests.map(({id: request_id, state, book, user}) => (
<tr key={request_id}>
<td>
<input type="button"
value="Удалить"
className="request-req-inp-del"
onClick={() => this.delete(request_id)}
/>
<input type="button"
value="Одобрить"
className="request-req-inp-app"
onClick={() => this.approve(request_id)}
disabled={**!book.state**}
/>
</td>
<td>{state ? "Запрос выполнен" : "На рассмотрении"}</td>
<td>{book.title}</td>
<td>{user.username}</td>
<td>{user.bookGiven - user.bookTaken}</td>
</tr>
)
Проблема оказалась на поверхности. Дело в том, что в своем Store я не додумался менять состояние в массиве. Происходила такая ситуация: кнопка нажималась, в бд изменения шли, но в массиве, который на фронте хранится в данный момент, я не менял состояние. Решение:
changeState(identity) {
const request = this.requests.find(({id}) => id === identity);
...
for (let obj of this.requests) {
if (obj.book.id === request.book.id){
obj.book.state = false;
}
}
return request;
}
Где,
request - текущая запись (в ней расположена кнопка), на которую была нажата кнопка;
identity - id этой записи, по которой можно было быотследить;
this.requests - массив записей для прохода;
obj.book.state - все записи, которые относятся к одной книге.
Также я немного изменил вызов массива, по которому проходил.
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости