on page load event在React中读取数据不工作

Question

第一次当我的页面加载时，我的应用程序总丢失页面。但是当我注释我的数组/*ClientsList。地图(项=比;所以在*/上显示数据，然后加载页面。然后我取消我的数组注释，然后数据显示成功，应用程序运行。如果我再次刷新我的页面，那么应用程序丢失。

const [ClientsList, setUsersList] = useState({}); 
React.useEffect(() => {

let BaseURL = 'https://******.com/taxplanner/rest-apis/users/clientslist';

fetch(BaseURL, {
method: 'POST',
data: {id:loggedIn}
})
.then((response) => response.json())
.then((res) => {

setUsersList(res.clients);

})
.catch((error) => {
console.log(error);

});
}, [""]);
return (
<>

<List type="unstyled" className="p-0 text-left bg-white">
{
/* when I comments my following array*/
ClientsList.map(item =>

<li className="my-2">
<a
className="allFormTitle"

href="#pablo"
onClick={(e) => {
e.preventDefault();
setSingleClient(item);
}}
>
{item.first_name +' '+ item.last_name}
</a>
</li>
)
}
</List>
</>
)

我的数组对象是这样的

---

[
{
"id": 1,
"first_name": "Mohammad",
"last_name": "Shafique",
"project_title": "[e-mail]",
"business_name": "Attarisoft",
"street_address": "*****",
"city": "Faisalabad",
"state": "Alaska",
"zip": "48000",
"phone": "[phone]",
"dependents": 25,
"registration_date": "2022-09-28 15:23:28",
"status": 1
},
{
"id": 2,
"first_name": "Mohammad",
"last_name": "Ateeq Raza",
"project_title": "*****@gmail.com",
"business_name": "Abuateeq",
"street_address": "*****",
"city": "Faisalabad",
"state": "Alabama",
"zip": "48000",
"phone": "[phone]",
"dependents": 25,
"registration_date": "2022-09-28 15:23:28",
"status": 1
},
]

////////////////////////////////////////我尝试了很多，但没有解决我的问题。请帮忙解决我的问题，谢谢关于

Answer 1

问题在于您的ClinetsList状态的初始值。初始值是一个空对象，但是你试图对它执行。map函数。

所以你的应用程序会崩溃。为了修复它，将初始值更改为空数组:

const [ClientsList, setUsersList] = useState([]);

在您的useEffect依赖项中有另一个问题。它应该是一个空数组([])，而不是(["])，以便只执行一次:

React.useEffect(() => {

let BaseURL = 'https://******.com/taxplanner/rest-apis/users/clientslist';

fetch(BaseURL, {
method: 'POST',
data: {id:loggedIn}
})
.then((response) => response.json())
.then((res) => {
setUsersList(res.clients);                
})
.catch((error) => {
console.log(error);
});
}, []);

同样，你的state和setState函数最好有相同的名字，像这样:

const [usersList, setUsersList] = useState([]); 

Answer 2

解析这个

const [ClientsList, setUsersList] = useState({}); 
///To////
const [ClientsList, setUsersList] = useState([]); 

给出的方向https://stackoverflow.com/users/17565505/script0谢谢你。