如何在Reactjs中检查数组是否为空

17 浏览
0 Comments

如何在Reactjs中检查数组是否为空

我正在使用Reactjs和nextjs，使用axios获取数据，我想在map/loop之前检查数组是否为空，也就是说，如果数组（students.data）中有数据，代码/循环应该执行。我该如何做？以下是我的当前代码：

const [students,setStudents] = useState({
  data: '',
  loading: true
})
const [name,setName] = useState('');
const handleClick2 = async() => {
    $("#mostviews").hide();
        const response = await axios.get(`https://xxxxxxxxxxxxxx.com/${spath}`)
     setStudents({
        data: response.data,
        loading: false
    })
}
{students.data.map((caseStudy ) => (
{caseStudy.title}
))}

在网络选项卡中，我得到的数据如下所示：

0   Object { id: "66", cat_name: "pined", title: "Game Engine", … }
1   Object { id: "40", cat_name: "pined", title: "Alpha Release Time !", … }

0

3 答案

0 Comments

在Reactjs中如何检查数组是否为空？

你需要修改你的代码，将()改为{}，如果只有一行代码，可以写成单行，就像我们通常在箭头函数中所做的那样：

const [students,setStudents] = useState({
  data: [], //将字符串改为数组
  loading: true
})
const [name,setName] = useState('');
const handleClick2 = async() => {
    let arr = []
    $("#mostviews").hide();
        const response = await axios.get(`https://xxxxxxxxxxxxxx.com/${spath}`)
        for (const key in response.data) { //假设你获取到的是对象中的对象而不是数组中的对象
            arr.push(response.data[key])
        }
     setStudents({
        data: arr,
        loading: false
    })
}
{students.length > 0 && students.data.map((caseStudy ) => {
    return <a>{caseStudy.title}</a>
})}

或者如果你想在数组中没有数据时渲染一些内容，可以使用以下方式：

condition ? renderThis : OrThis

我们需要看更多的代码，比如你在数组中获取数据的位置。

此外，你将它用( )包围起来，而不是{ }。

你能更新你的答案，这样我就可以在我的项目中检查和实现了。

仍然没有显示任何内容，实际上在我的地方"students.length"不起作用（什么也没有显示）。

将data: ""改为data: []，然后再试试。

抱歉，但仍然不起作用。我更新了我的问题，我发布了我在网络选项卡中获取到的数据（json数据），但仍然没有显示任何内容。

检查一下response.data的类型，是一个数组还是一个对象，我在对象的情况下更新了我的答案。

它可以工作了，但是正确（更新后）的数据在刷新页面后才显示出来，我应该使用"useeffect"还是其他什么方法？请更新一下。

你的页面在点击事件后刷新吗？或者是什么情况？

数据显示得很好，但是每当我点击博客时，旧数据（未更新的数据）显示出来。

看起来我们需要更多的代码，特别是你获取数据的部分，例如你没有预定义的数据，所以它不应该这样工作。

0
0 Comments

在Reactjs中如何检查数组是否为空？

问题的原因：在给定的代码中，使用了.students.data的条件判断，但是当students数组没有值时，没有任何内容显示在页面上。

解决方法：使用&&运算符来检查数组是否为空。具体代码如下：

{students.data?.length > 0 &&
     students.data.map((caseStudy) => (
      {caseStudy.title}
  ))}

如果您的students数组没有值，则不会显示任何内容。请确保您的students数组是否有值。

如果您需要进一步解决问题，请提供更多详细信息并创建另一个问题。您可以使用useEffect hook来解决这个问题。谢谢！

0
0 Comments

问题的出现原因是在React中检查数组是否为空时出现了错误，导致数据无法显示。解决方法是通过条件判断来检查数组是否为空，然后进行相应的操作。

在给定的代码中，我们可以看到使用了逻辑与运算符（&&）来检查数组是否存在并且长度是否大于0。如果条件成立，就会使用map函数遍历数组中的每个元素，并将其渲染为一个链接。否则，将显示一个空字符串。

然而，根据提供的示例链接，我们可以看到数据没有显示出来。为了解决这个问题，我们需要确保正确地传递数据到组件中。在给定的示例中，我们可以看到在App组件中定义了一个名为"students"的数组。然而，这个数组并没有被传递到要渲染的组件中。

为了解决这个问题，我们需要在App组件中将"students"数组传递给要渲染的组件。我们可以通过将"students"数组作为props传递给组件来实现这一点。

下面是解决问题的代码示例：

// 在App组件中传递"students"数组给要渲染的组件
<YourComponent students={students} />
// 在YourComponent组件中检查并渲染数组
const YourComponent = ({ students }) => (
  <div>
    {students && students.length ?
       students.map((caseStudy) => (
        <a>{caseStudy.title}</a>
    )) : ""}
  </div>
);

通过这样的修改，我们可以确保将正确的数据传递给要渲染的组件，并且能够正确地检查并渲染数组。

0