Filtering fetched array in render React

Question

New to React here so please bear with me. I fetched a list of data from a server and that I put in the State though the componentDidMount function. In it, I push the data to my State array named solo. It works great until I try to render the array. I need to filter my array to map the data based on one property (categ) matching a property from another array, and create buttons in the right category. When I run my code, I only get one button rendered, whichever is first in my solo array, in which all my data appears. I'm sure it has someting to do with the asynchronous nature of fetch, but I don't understand what. Here's my code :

    componentDidMount(){
      // Get URLS from config
      const data = this.props.config.layerUrls
      // Init state values
      let categ = [...this.state.categ]
      let solo = [...this.state.solo]
      // Loop through categories
      for (let i = 0; i < data.length; i++) {
        let donneesCateg = data[i]
        let listURLS = donneesCateg["urls"]
        categ.push({['categ']: donneesCateg["name"], ['type']: "categ", ['urls']: listURLS })
        this.setState({ categ : categ })
  
       // Loop through individual URL data
        for (let a = 0; a < listURLS.length; a++) {
          fetch(listURLS[a] + "?f=pjson")
            .then(res => res.json())
            .then(data => {
     // Push to state array
              solo.push({['categ']: donneesCateg["name"], ["type"]: "solo", ["couche"]: data.name, ["url"]: listURLS[a] })
              this.setState({ solo : solo })

            })
        }
      }
    }

render() {
    {
      return (
          <p className="shadow-lg m-3 p-1 bg-white rounded">
            {this.state.categ.length!=0 ? this.state.categ.map(item => {
              return (
                <div>
                  <button id={item.categ} className="categ" value={item.urls} onClick={this.selectChangeMultiple}>{item.categ}</button>
                  {this.state.solo.length!=0 ? this.state.solo.filter(solo => solo.categ == item.categ).map(data =>
                    <button id={data.categ} className="btn" value={data.url} onClick={this.selectChangeSingle}>{data.couche}</button>
                  ) : <p id="loadingMsg">Solo data Loading...</p>}
                </div>
              )
            }) : <p id="loadingMsg">Categ data Loading...</p>}
          </p>
        </div>
      );
    }
  }

Note : I have to go through this loop system because the URLs I use to fetch the data are in a JSON in which they are stored by categories. Many thanks.

Igor Loskutov · Accepted Answer · 2022-05-18 15:32:17Z

1

In your code, any subsequent call to setState({solo: solo}) isn't recognized as an update by React. This happens because solo is always the same "object" (although mutated with push, but React comparison algorithm doesn't go so far as to compare the new and previous. It just compares the old and new solos with something like ===.

An obvious fix would be to call this.setState({ solo : [...solo] }) instead of this.setState({ solo : solo }), although it would still may cause too many extra rerenders. But it'd be a good start.

answered May 18, 2022 at 15:32

Igor Loskutov

2,3842 gold badges24 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cam_gis Over a year ago

Thanks a lot! It solved it and didn't cause any extra rerenders.

Collectives™ on Stack Overflow

Filtering fetched array in render React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related