reactjs 在页面加载事件中获取数据不起作用在React中

wlzqhblo 于 2022-11-29 发布在 React

关注(0)|答案(2)|浏览(127)

第一次当我的页面加载，然后我的应用程序总页面丢失。但当我评论我的数组/* ClientsList. map（item =〉等等*/这是显示数据，然后页面加载。然后我取消评论我的数组，然后数据显示成功，应用程序运行。再次，如果我刷新我的页面，然后应用程序丢失。

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": "attarisoft@gmail.com",
    "business_name": "Attarisoft",
    "street_address": "*****",
    "city": "Faisalabad",
    "state": "Alaska",
    "zip": "48000",
    "phone": "+923238383992",
    "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": "+923238383992",
    "dependents": 25,
    "registration_date": "2022-09-28 15:23:28",
    "status": 1
},

]

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

reactjs

来源：https://stackoverflow.com/questions/74580358/on-page-load-event-fetch-data-is-not-working-in-react

2条答案

按热度按时间

pprl5pva1#

问题出在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([]);

赞(0）回复(0）举报 2022-11-29

bihw5rsg2#

已解决此问题以更改此

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

     ///To////

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

此方向由
https://stackoverflow.com/users/17565505/script0多谢

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs 在页面加载事件中获取数据不起作用在React中

2条答案

相关问题

热门标签

最新问答