我如何在跟随链接之前创建异步setState ?

Question

我希望能够'捕获'一个选择的用户点击一个链接，将他们带到另一个页面。我需要用户选择来显示所选图像的详细页面。

我面临的问题是浏览器在react更新状态"键"之前遵循链接。密钥的状态更改没有传递到详细信息页。有没有一种不需要取回就能解决的简单方法?

export default class IGallery extends React.Component {
constructor(props) {
super(props);
this.state = {
countryList: [],
wallet: "",
key: "",
};
}
handleClick = (_key) => {
console.log("before setState", this.state.key);
this.setState({ key: _key }, () =>
console.log("after setState", this.state.key)
);
};
render() {
return (
<div className={styles.gallery}>
<h1>Gallery</h1>
<ImageList cols={6} rowHeight={320}>
{this.state.countryList.map((data, idx) => (
<ImageListItem key={idx} className={styles.imageItem}>
<Link to="/item" onClick={() => this.handleClick(data.key)}>
<img src={data.image} width={320} />
<ItemDetail id={this.state.key}></ItemDetail>
</Link>
<ImageListItemBar
title={"Braintube"}
subtitle={data.key}
actionIcon={<FavoriteBorder fontSize="large" color="pink" />}
actionPosition="top"
/>
</ImageListItem>
))}
</ImageList>
</div>
);
}
}

我希望

<ItemDetail id={this.state.key}></ItemDetail> 

传递状态值给子组件itemDetail。

这是我的路由路径从index.js

<Router>
<Header childToParent={childToParent}/>

<Switch>
<Route path="/" exact={true}>
<Home></Home></Route>
<Route path="/project-space">
<ProjectSpace childToParent={wallet}></ProjectSpace> 
</Route>
<Route path="/about">
<About></About></Route>
<Route path="/item"><ItemDetail></ItemDetail></Route>
</Switch>


<FooterMain></FooterMain>
</Router>

Answer 1

我认为我们需要退后一步，理解React范式来回答这个问题。

在React中，状态只有一个方向，当组件被卸载时，状态不会被保留。现在，我们有下面的

路由器比;SomePage祝辞gallery (State = ....)

，我们试图重定向到:

路由器比;ItemPage

就像你在这里看到的，移动到ItemPage会使状态下降，因为Router会重新渲染，SomePage会被卸载。

因此，我们有两个选择:

• 在url参数中传递该项目id，然后由下一页处理
• 将状态移动到路由器父级，并将状态的setter + getter传递给页面组件(不推荐)

对于您的情况，选项一更直观。