1

Имеется кусок кода на реакте. Там где звёздочки проблема. Состояние кнопки обновляется только при обновлении страницы. 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>
)
3
  • Я тут недавно давал ответ на похожий вопрос: Состояние загрузки для каждой кнопки отдельно Ознакомьтесь, думаю будет полезно. Можно сделать массив где будет храниться переменная для каждой кнопки. 11 дек 2018 в 14:30
  • @DenisBubnov суть в том, что в массиве 10 книг. По каждой проходим и рисуем кнопки. Нужно, чтобы при нажатии кнопки сразу считывали изменившиеся состояние и применяли дизейбл, но это происходит (сейчас) только если перезагрузить страницу, т.е. пройтись по массиву заново. Кликая по одной кнопке, мне необходимо блокировать другую.
    – Lancelot
    12 дек 2018 в 5:41
  • 1
    @DenisBubnov всему виной моя невнимательность и поверхностные знания React. Ошибку нашёл, спасибо Вам за помощь, Вы навели на мысль)
    – Lancelot
    12 дек 2018 в 6:55

1 ответ 1

1

Проблема оказалась на поверхности. Дело в том, что в своем 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 - все записи, которые относятся к одной книге.

Также я немного изменил вызов массива, по которому проходил.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.