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

Question

I want to be able to 'capture' a selection of a user clicking a link that takes them to another page. I need the users selection to display a detail page of thebselected image.

I'm facing the problem that the browser follows the link before react updated the state "key". The state-Change of key is not passed to the details page. Is there an easy way to fix that without fetch?

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

I expect that

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

passes the state value to the child component itemDetail.

Here is my Routing Path from 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

I think we need to take a step back and understand the React paradigm to answer this question.

In React, state goes only one way and is not retained when a component is unmounted. Right now, we have the following

Router > SomePage > IGallery (State =....)

and we're trying to redirect to:

Router > ItemPage

As you can see here, moving away to ItemPage will drop state because Router will re-render and SomePage will be unmounted.

Therefore, we have two options:

• Pass this item id in the url parameter which will then be handled by the next page
• Move the state to the router parent and pass the state's setter + getter down to the page components (unrecommended)

For your situation, option one is more intuitive.