Question

下面是一本书中的一些代码：

>>> df_8h = (pd.get_dummies(df, prefix='', prefix_sep='')
...            .resample('8H', on='Datetime')
...            .sum())
>>> df_8h
                         Group A      Group B      Group C   Section 1  \
Datetime                                                                 
2009-07-06 00:00:00            2            0            0           0   
2009-07-06 08:00:00            0            0            2           0   
2009-07-06 16:00:00            1            0            2           0   
2009-07-07 00:00:00            2            1            0           0   
2009-07-07 08:00:00            1            2            1           1   
2009-07-07 16:00:00            1            0            0           0   

                      Section 2   Section 3   Section 4   Unknown  
Datetime                                                           
2009-07-06 00:00:00           1           1           0         0  
2009-07-06 08:00:00           1           1           0         0  
2009-07-06 16:00:00           0           1           0         2  
2009-07-07 00:00:00           1           1           1         0  
2009-07-07 08:00:00           0           1           0         2  
2009-07-07 16:00:00           0           1           0         0

并且我将它们用作：

export class ToggleLink extends Component {

    constructor(props) {
        super(props);
        this.state = {
            doRedirect: false
        }
    }

    handleClick = () => {
       this.setState({ doRedirect: true },
             () => this.setState({ doRedirect: false }));
    }

    render() {
        return <Route path={this.props.to} exact={this.props.exact}
            children={routeProps => {
                const baseClasses = this.props.className || "m-2 btn btn-block";
                const activeClass = this.props.activeClass || "btn-primary";
                const inActiveClass = this.props.inActiveClass || "btn-secondary"

                const combinedClasses =
                    `${baseClasses} ${routeProps.match ? activeClass : inActiveClass}`

                return <React.Fragment>
                    {this.state.doRedirect && <Redirect to={this.props.to} />}
                    <button className={combinedClasses} onClick={this.handleClick}>
                        {this.props.children}
                    </button>
                </React.Fragment>
            }} />
    }
}

这可行，但是我只是想知道如果将<ToggleLink to="/products">Products</ToggleLink> <ToggleLink to="/suppliers">Suppliers</ToggleLink>处理程序更改为以下原因，为什么需要将状态重置为false：

handleCLick

重定向无效。例如，我在“产品”部分，如果单击“供应商”按钮，它将无法转到“供应商”部分，为什么？

Answer 1

我想您只是这样改变了handleClick

handleClick = () => {
       this.setState({ doRedirect: true });
    }

我认为这个answer还为您提供了有关react中路由的基本概念

Answer 2

已进行了重置，因此您可以重用重定向机制。

请注意，在您的代码中，单击按钮后，只能直接设置doRedirect值，即从false到true。对于重定向机制，它取决于将doRedirect的值从false翻转到true来触发和完成重定向，而不是相反。通过删除setState中的回调函数，系统将永远不会被重置，因此重定向将仅工作一次（对于每个按钮）。

在此处查看有效的代码沙箱：https://codesandbox.io/s/elastic-hermann-hcz8q。请注意，一键操作后doRedirect会卡在true上，并且重定向会停止工作。

如果不重置状态，为什么重定向不起作用？

2 个答案: