Passing search results to a component in React

Question

I've built a React app to search recordings, that has the following structure:

SearchScreen => SearchParms
             => SearchResults

SearchScreen is rendered like this:

return(
<Fragment> 
 <div className='containerCR'><SearchParms getRecordingsHandle = {this.handleGetRecordings} /> 
 <SearchResults recordings = {this.state.recordings}/>
</Fragment>)

A button on the Search Parms screen calls this.handleGetRecordings, which calls an async function to get records, adds them to state.recordings and then passes them to the SearchResults screen.

Problem is, because it's async it passes the recordings object before it's populated.

handleGetRecordings sets the state for the search parameter ani. It needs to be done in a then because it doesn't set it immediately:

handleGetRecordings = (ani) =>
  {
    console.log(this.state.ani);
    console.log("Passed value: ", ani);
    this.setState({
      ani:ani
    }, () => {

      console.log("Set state finished:", this.state.ani);

      this.fetchRecordings();
    });

  }

The fetchRecordings function gets the data and then calls setRecordings:

fetchRecordings = async () => {
    console.log("getting recordings for: ", this.state.ani);
      const myInit = {
          headers: {}, 
          response: true, 
          queryStringParameters: {
            ani: encodeURIComponent(this.state.ani)
          }
        };

        console.log("Params", myInit);

        API.get(myAPI, path, myInit)
        .then(response => {
          console.log("Response:", response)
          let newRecordings = this.state.recordings;
          newRecordings.push(response)
          this.setRecordings(newRecordings[0].data)
  
        })
        .catch(error => {
          console.log(error)
        })
      
  }

setRecordings writes the list of recordings to the state, ready to pass to the SearchResults page, except by the time it gets here its missed its chance!

setRecordings =(recordings) =>
  {
    console.log("Passed value: ", recordings);
    this.setState({
      recordings:recordings
    }, () => {      
      console.log("Current State: ", this.state.recordings);
      
    });
  }

What's the correct way of doing this?

I'm new to React and haven't heard of hooks! How would you use them? — Nick Wright, Feb 09 '23 at 16:53
Also if this is an application you're writing from scratch it would be wiser to go with React hooks, check out the latest React docs — Anurag Srivastava, Feb 09 '23 at 16:57
that post looks as though it's what I need, thanks, but its 5pm and I'm going to leave it until tomorrow :-) — Nick Wright, Feb 09 '23 at 17:00
just tried the How to pass the https://stackoverflow.com/questions/56903577/how-to-pass-async-state-to-child-component-props solution and it works! Many thanks - I can finish work happy! — Nick Wright, Feb 09 '23 at 17:10

score 1 · Answer 1 · answered Feb 09 '23 at 16:59

Reading the state the way you're doing here, is not guaranteed to give you the latest state possible.

let newRecordings = this.state.recordings

In order to use your old state to create a new one, you need to pass an updater function to setState as the first argument. Look at the examples here in React docs: https://reactjs.org/docs/react-component.html#setstate
Then you can create your new state based on your old state and set it as the new state by returning it from your updater function. This way you can be sure that your new state is what you expect it to be.

Moreover, since your state is an array, its always passed/refered to by reference and React always suggests to not mutate a state (here, we're mutating it by pushing a value to it), but instead, create a new one by cloning the previous one. So the final setState should look like this:

this.setState((prevState) => {
  return {
    recordings: [...prevState.recordings, response],
  }
})

Passing search results to a component in React

1 Answers1