时间戳

首页 > 解决方案 > 数组在函数中检测为空，即使其中有元素

reactjs - 数组在函数中检测为空，即使其中有元素

问题描述

我的 React 代码有问题。我想构建一个文章数组，每个文章里面都有一个删除按钮来删除所需的文章。

但在实践中，我的 console.logdeleteDailyStandItem()总是返回一个空数组。你知道为什么吗？

提前谢谢你，祝你有美好的一天:)

const deleteDailyStandItem = (index, id) => {
        console.log(dailyStandItemsDisplayed)
        //Delete the article from the DB thanks to the id

    }

    useEffect(() => {
        getDailyStand()
        .then(dailyStandDB => {
            if(dailyStandDB){
                setDailyStand(dailyStandDB)
                getDailyStandDetails()
                .then(dailyStandItemsDB => {
                    for(let i = 0; i < dailyStandItemsDB.length; i++){
                        setDailyStandItemsDisplayed(dailyStandItemsDisplayed => [...dailyStandItemsDisplayed,
                        <article key={dailyStandItemsDB[i].id}>
                            <section>
                                <img src={config.dailystand_detail_pict_url + dailyStandItemsDB[i].pict_url} alt={"illustration"+dailyStandItemsDB[i].id}></img>
                            </section>
                            
                            <p>Description : {dailyStandItemsDB[i].description}</p>
                            
                            <Button onClick={() => {deleteDailyStandItem(i, dailyStandItemsDB[i].id)}}><DeleteIcon /></Button>
                        </article>])
                    }
                    
                })
            }
        })
    }, [])

编辑 ：

我按照你说的做了，效果很好！谢谢 ！

标签： reactjs

解决方案

如果dailyStandItemsDisplayed是状态变量，您可以将其添加到您的代码中：

useEffect(() => {
  console.log(dailyStandItemsDisplayed)
}, [dailyStandItemsDisplayed])

您可以稍微更改您的代码以另一种方式执行此操作：

    useEffect(() => {
        getDailyStand()
        .then(dailyStandDB => {
            if(dailyStandDB){
                setDailyStand(dailyStandDB)
                getDailyStandDetails()
                .then(dailyStandItemsDB => {
                   //Check here if `dailyStandItemsDB` is a list/array 
                   setDailyStandItemsDisplayed(dailyStandItemsDB)
                    
                    
                })
            }
        })
    }, [])

接着：

return (
  <>
   {
     dailyStandItemsDisplayed.map((dailyStandItemsDB) => {
       return <article key={dailyStandItemsDB.id}>
         <section>
           <img src={config.dailystand_detail_pict_url + dailyStandItemsDB.pict_url} alt={"illustration"+dailyStandItemsDB.id}></img>
                            </section>
                            
          <p>Description : {dailyStandItemsDB.description}</p>
                            
          <Button onClick={() => {deleteDailyStandItem(i, dailyStandItemsDB.id)}}><DeleteIcon /></Button>
        </article>
     })
   }
  </>
);

推荐阅读