javascript - Cum să aștepți setarea stării înainte de a parcurge un array?

Încerc să maphez niște date pe care le-am stocat într-un array (captura de ecran de mai jos), dar nu reușesc să le accesez, pentru că sunt încărcate asincron. Cum aș putea să aștept datele? Există vreo modalitate de a face acest lucru în funcția de renderizare?

 render() {
         
        return (
          {this.state.serials.map((number) => {
    return number.s && number.s.length? 
    (
        <h2 > {number.s[0].a}</h2>
  ) : null
})}
        )
    }

Aceasta este componentDidMount() unde obțin datele mele:

componentDidMount() 
        const uid = this.state.user.uid;
        const gatewayRef = db.ref(uid + '/gateways');
        gatewayRef.on('value', (gateways_nums) => {
            const serialsArr = [];
          gateways_nums.forEach((gateway_num) => {
            const serialRef = db.ref('gateways/' + gateway_num.val()['gateway'])
            const last_temps =[];
            serialRef.on('value', (serials)=>{ 
                const ser = []
                serials.forEach((serial)=>{
                    ser.push(serial.val()['serial'])
                })
                last_temps.push({a: gateway_num.val()['gateway'], b: ser})
            })
            serialsArr.push({s:last_temps})
          });
          this.setState({serials:serialsArr})
        });
      }

Aș aprecia foarte mult orice ajutor!

Răspuns #1

Încearcă asta:

render() {
  if(!this.state.serials) {
    // Ideally you should draw some loading spinner here
    // to indicate that data is not ready yet. But for a quick
    // solution you can just draw nothing
    return null
  }

  // Also "return ({ this.state.serials.map() })" is not valid syntax
  // you either need to return just an array without using braces, or
  // use some JSX tag and put braces inside of it
  return (
    <div>
        {this.state.serials.map(serial => ...)}
    </div>
  )
}

Vorbind despre sintaxa invalidă cu acolade, ai putea de asemenea să faci

return this.state.serials.map(serial => ...)

Sau (mai bine)

return (
  <>
    {this.state.serials.map(serial => ...)}
  </>
)

Dacă nu doriți un div suplimentar în jurul datelor dvs.

Răspunsul #2

Am reușit să îl fac să funcționeze schimbând puțin algoritmul. Cu acest cod nu mai este nevoie să așteptăm date:

    componentDidMount() {
    const uid = this.state.user.uid;
    const serialRef = db.ref(uid + '/gateways');

    serialRef.on('value', (serial_numbers) => {
      const serials = [];
      serial_numbers.forEach((serial_number) => {
        const za = serial_number.val()['gateway'];
        const last_temps = [];
        const tempRef = db.ref('gateways/' + za);
        tempRef.orderByChild("serial").on('value', (temps) => {
          const temparray = [];
          temps.forEach((temp) => {
            temparray.push(temp.val());
          })
          const last_temp = temparray;
          last_temps.push({ l: last_temp, za });
          this.setState({ last_temps: last_temps })
        })
        serials.push({ s: last_temps });
      });
      this.setState({ serials: serials });
    });
  }