1. 首页
  2. 问题列表
  3. ReactJS：如何在状态（useState）内获取响应数组，并在呈现/绑定时检查数组的长度
提问者：小点点

ReactJS：如何在状态（useState）内获取响应数组，并在呈现/绑定时检查数组的长度


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以获得返回的长度。


共1个答案

匿名用户

从状态获取数组长度不需要额外的工作。如果设置的状态是数组，data，只需使用属性访问长度即可。在JSX中的任何地方，只要{}就可以使用JavaScript代码。重要信息，您已将默认数据设置为布尔类型false，它将在访问长度时在初始渲染时产生错误，因此将其设置为空数组，

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

相关问题