ReactJS:单击即可重新加载/重新渲染组件 [英] ReactJS: reloading/re-rendering a component on click

问题描述

我有一个名为类别"的组件，其中有2个按钮处于活动状态和非活动状态.每个按钮都会调用一个api来激活或取消激活所选记录.但是，按钮部分和api部分运行完全正常，并在完成任务后获得了正确的响应.但是，在api响应返回成功代码后，我需要类别"组件来重新加载/重新渲染.

I have a component called "categories", where I have 2 buttons active and inactive. Each button calls an api to either activates or deactivates the selected record. However, the button part and the api part are running completely fine and getting proper response after getting the task done. But, I need the "categories" component to reload/re-render after the api response has returned the success code.

我用谷歌搜索了解决方案，但是我得到的答案对我来说几乎没有什么困惑，因为我目前正在学习ReactJS.

I googled for the solution but the answers I got were little confusing for me because I am currently learning the 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>

    ...
}

还可以减少/优化此代码吗??

Also can this code be reduced/optimized..?

推荐答案

我想出了解决方案(我从另一个答案中得到了一个主意，但不幸的是我丢失了该链接.如果找到它，我将其粘贴.再次).

这是我的解决方案:

...

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>
        }
        ...
    )
}

我希望这对某人可能会派上用场.但是，如果还有任何改进的余地，请告诉我.:)

I hope this may come in handy for someone. However, if there is any room for improvement then please let me know. :)

这篇关于ReactJS:单击即可重新加载/重新渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！