ReactJS: как получить массив ответов внутри состояния (useState) и проверить длину массива при рендеринге / привязке

Question

ReactJS: как получить массив ответов внутри State(useState) и проверить длину массива при рендеринге / привязке. Я не знаю, как установить массив RecentData в useState, чтобы получить длину в возвращении.

import React, { useState } from "react";
import UseData from "../../hooks/useData";

const HomePage = (props) => {
  const [data, setData] = useState(false);
 
 !data &&
    UseData(formattedData => {
      const { hasError, recentData } = formattedData;
      console.log(recentData)  //// recentData has response 
      if (hasError) {
       //
      } else {
        setData(recentData); 
      }
    })
    
    return (
    // I want to get 'recentData' here like recentData.length > 0, have 'data' set true 
    {data && data.map((info, i) => (   
              <Grid key={i}>
                  member={info.firstName}
              </Grid>
            ))}
            
    // I want to get 'recentData' recentData.length === 1, 
    {data &&
              <Grid key={i}>
                  member={info.firstName}
              </Grid>
            ))}
    // I want to get 'recentData' recentData.length === 0
 
              <Grid >
                 No data to render
              </Grid>
        )
        }
        export default HomePage

recentData array returned from the useData hook

0:
{firstName: "XXXX"
lastName: "YYYY"}
1:
{firstName: "AAAA"
lastName: "BBBBB"}
2:
{firstName: "CCCC"
lastName: "DDDD"}

Я не знаю, как установить массив RecentData в useState, чтобы получить длину в возвращении.

Answer 1

Вам не нужно выполнять дополнительную работу, чтобы получить длину массива из состояния. Если установленное вами состояние,data, является массивом, вы просто получаете доступ к длине, используя свойство, .length где угодно, в JSX, вам просто нужно {}использовать код JavaScript. Важно, вы установили данные по умолчаниюfalse, логический тип, он выдаст ошибку при первоначальном рендеринге при доступе к length, поэтому поместите его в пустой массив,

const [data, setData] = useState([]);

Посмотрим на пример:

const myComp = () => {
    const [data, setData] = React.useState([]);
    // do some stuff here to fetch data from anywhere and set it to data
    return (
        <>
        {data.length === 0 ? <p>Length is 0</p>:null}
        {data.length === 1 ? <p>Length is 1</p>:null}
        {data.length > 1 ? <p>Length greater that 1</p>:null}
        </>
    )
}