ReactJS：如何在 State(useState) 中获取响应数组并在 rendering/binding 时检查数组的长度

Question

ReactJS：如何在 State(useState) 中获取响应数组并在 rendering/binding 时检查数组的长度。我不知道将 recentData 数组设置为 useState 以获取 return.

中的长度

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 以获取 return 中的长度。

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

ReactJS：如何在 State(useState) 中获取响应数组并在 rendering/binding 时检查数组的长度

ReactJS: How to get response array inside State(useState) and check the length of the array when rendering/binding

javascript

render

reactjs

react-hooks

use-state