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的{{1}}道具对象形式仅接受4个属性：to，pathname，search和hash。 / p>

Link

state

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

props.location.state

将更改后的状态传递给道具，并且道具未更新

1 个答案: