Javascript React在挂载时呈现空数组项，如何避免？

我再次在这里寻求帮助，我有一个组件在挂载时呈现一个空的数组项，我如何避免这种情况，并有条件地呈现一个

标记，告诉用户数组中还没有任何项？我已经尝试过这个代码，但没有成功。这是我的组件（我知道我必须重构它，我只想让它先工作）：

import React，{useState，useffect}来自“React”
const format数以千计=需要（“格式化数以千计”）
常量客户端=（）=>{
const[client，setClient]=useState（{}）
const[allClients，setAllClients]=useState（[]）
const[name，setName]=useState（“”）
常数[cuota，setCuota]=useState（“”）
const[id，setId]=useState（“”）
useffect（（）=>{
SetAllClient（[…所有客户端，客户端]）
}，[客户]）
函数handleSubmit（事件）{
event.preventDefault（）
如果（！name | | |！cuota | |！id）返回
setClient（{…client，name，cuota，id}）
集合名（“”）
setCuota（“”）
setId（“”）
}
功能handleDeleteButton（id）{
allClients.filter（cl=>id！==cl.id）
}
返回(
新客户
setName（event.target.value）}
/>
setCuota（event.target.value）}
/>
setId（event.target.value）}
/>
阿格雷戈
客户
客户
库塔
识别器
{所有客户(
allClients.map（客户端=>(
{client.name}
{format数千（client.cuota）}
{client.id}
handleDeleteButton（client.id）}
className=“btn btn危险btn sm”
>
博拉尔
))
) : (
犯罪客户

)}
)
}
导出默认客户端

这是我在挂载上得到的输出：

---

这是所有客户端的初始值，我不知道为什么

Array[{}]

这是您当前的代码：

allClients ? allClients.map : <p></p> 

所有客户端？allClients.map:

相反，您的代码应该是这样的：

allClients.length ? allClients.map : <p></p> 

allClients.length？allClients.map:

---

allClients是一个空数组，因此它返回true。相反，您的代码应该检查allClients.length，它实际返回数组的长度。

这是由

useffect

块引起的。第一次渲染组件时，将对象添加到数组中并清空。这就是为什么此条件

allClients.length>0

为真：

这是AllClient的初始值，我不知道为什么数组[{}]

解决方案1:使用

null

初始化

所有客户端。对客户机也这样做。检查客户端是否具有以下值：

const [client, setClient] = useState(null)
const [allClients, setAllClients] = useState(null);

useEffect(() => {
   if(client) setAllClients([...allClients || [], client]);
}, [client]);

解决方案2:仅使用null初始化客户端，然后检查allClients.length>0以呈现元素

const [client, setClient] = useState(null)
const [allClients, setAllClients] = useState([]);

useEffect(() => {
   if(client) setAllClients([...allClients, client]);
}, [client]);

在这两种情况下，您都需要检查客户端是否具有有效值。
您还可以检查客户端是否具有属性。
const [client, setClient] = useState(null)
const [allClients, setAllClients] = useState([]);

useEffect(() => {
   if(client) setAllClients([...allClients, client]);
}, [client]);