将更改的状态传递给道具并且道具不会更新

Question

我在通过 react-router-dom 元素 NavLink 传递更新状态时遇到问题。

这是组件1的示例代码：

...
this.state = {
   toggle: true;
}

this.handleClick = () => {
    this.setState(prevState => {toggle: !prevState.toggle});
}

...

render() {
    { toggle } = this.state;
    return (
        <div>{toggle}</div>
        <NavLink to={{pathname: "component2path", toggle}}>
            <div role="presentation" onClick={this.handleClick}>click</div>
        </NavLink>
    );
}

所以点击后我可以看到切换真/假的 div 变化。

这是组件2的示例代码：

ComponentDidUpdate(prevProps,prevState) {
    { toggle } = this.props.location;
    { toggleOld } = prevProps.location;
    
    console.log(toggle,toggleOld); //this never change

    //i want to achieve this
    if(toggle === toggleOld) {
       doAction(); //do something;
    }
}

问题是我似乎无法在道具中反映状态变化。

有人可以帮忙吗？我有点坚持这个太久了。

Answer 1

Link 的 to 道具对象形式仅接受 4 个属性：pathname、search、hash 和 state。

Link

<NavLink
  to={{
    pathname: "component2path", 
    state: {
      toggle, // <-- pack value into state object
    },
  }}
>
  <div role="presentation" onClick={this.handleClick}>click</div>
</NavLink>

从props.location.state中提取它们

ComponentDidUpdate(prevProps,prevState) {
    { toggle } = this.props.location.state;
    { toggleOld } = prevProps.location.state;
    
    console.log(toggle,toggleOld); //this never change

    //i want to achieve this
    if(toggle === toggleOld) {
       doAction(); //do something;
    }
}