ReactJS: перезагрузка / повторная визуализация компонента по клику - PullRequest
Новая
       45

ReactJS: перезагрузка / повторная визуализация компонента по клику

0 голосов
/ 26 февраля 2019

У меня есть компонент под названием «категории», где у меня есть 2 кнопки, активные и неактивные.Каждая кнопка вызывает API для активации или деактивации выбранной записи.Однако, часть кнопки и часть API работают полностью нормально и получают правильный ответ после выполнения задачи.Но мне нужен компонент «категории» для перезагрузки / повторного рендеринга после того, как ответ API вернул код успеха.

Я погуглил решение, но полученные ответы меня немного смутили, потому что я сейчасизучение ReactJS.

Вот мой код: 

...

setInactive(e)
{
    Axios
        .get("/api/category/deactivate/" + $(e.currentTarget).data('token'))
        .then((response) => {
            if (response.data.success == true)
            {
                this.setState({
                    state: this.state
                });
            }
        });
}

setActive(e)
{
    Axios
        .get("/api/category/reactivate/" + $(e.currentTarget).data('token'))
        .then(response => {
            if (response.data.success == true)
            {
                this.setState({
                    state: this.state
                });
            }
        });
}

render()
{
    ...

    (category.status == "Y")
        ? <button data-token={category.token} className="lightRed" onClick={this.setInactive}>Inactive</button>
        : <button data-token={category.token} className="green" onClick={this.setActive}>Active</button>

    ...
}

Также этот код может быть уменьшен / оптимизирован ..?

1 Ответ

0 голосов
/ 27 февраля 2019

Я нашел решение (я получил идею из другого ответа, но, к сожалению, я потерял эту ссылку. Я вставлю ее, если найду ее снова) .

Вот мое решение: 

...

componentWillMount()
{
    this.fetchData();
}

fetchData()
{
    Axios
        .get("/api/categories")
        .then(response => this.setPagination(response.data));
}

setStatus(token, status)
{
    Axios
        .get("/api/category/status/" + token + "/" + status)
        .then((response) => {
            if (response.data.success == true)
            {
                this.setState({
                    message: <Alerts alertClass="alert-success">
                        Category status has been modified successfully.
                    </Alerts>
                });
                this.fetchData();
            }
            else
            {
                this.setState({
                    message: <Alerts alertClass="alert-danger">
                        {response.data.message}
                    </Alerts>
                });
            }
        });
}

setPagination(response)
{
    this.setState({
        categories: response.data,
        totalItemsCount: response.total,
        itemsCountPerPage: response.per_page,
        activePage: response.current_page,

        paginationIndex: ((response.current_page - 1) > 0)
            ? (((response.current_page - 1) * response.per_page) + 1)
            : 1
    });
}

pagination(pageNumber)
{
    Axios
        .get("/api/categories?page=" + pageNumber)
        .then(response => this.setPagination(response.data));

    this.setState({
        activePage: pageNumber
    });
}

render()
{
    return (
        ...
        {
            (category.status == "Y")
                ? <button className="buttons tiny lightRed" onClick={() => 
                      this.setStatus(category.token, 'N')
                  }>Inactive</button>
                : <button className="buttons tiny green" onClick={() => 
                      this.setStatus(category.token, 'Y')
                  }>Active</button>
        }
        ...
    )
}

Надеюсь, кому-то это может пригодиться.Однако, если есть какие-то возможности для улучшения, пожалуйста, дайте мне знать.:)

...