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