將 API 數據推送到嵌套數組並呈現結果

Question

我正在調用 API 來獲取用戶數組，對它們進行排序，如果personalTrainerId 等於我的userId，則將它們放入數組中，然后將它們渲染成卡片。

我想接收數據

我的客戶：[{'userId':86,'firstName':'Client','lastName':'23','email':'newclient@ab'},{'userId':96,'firstName':'cl ','姓氏':'ie','email':'cl@ie'}]

但相反，我得到了結果

我的客戶：{'userId':86,'firstName':'Client','lastName':'23','email':'newclient@ab'},{'userId':96,'firstName':'cl' ,'姓氏':'ie','email':'cl@ie'},

（不帶括號）

我從調用中得到響應，但是當我嘗試渲染它們時，object 以“未定義”的形式返回 - 我對此很陌生，我可能正在接近它完全錯誤。 任何幫助，將不勝感激。

我將響應添加到數組的代碼：

function AddClients(response){
    const users = response.data;
    var newClient="";
    const myId = parseInt(getUserId())

    for(var i = 0; i < users.length; i++ ){
            if (response.data[i].personalTrainerId === myId){
                newClient=("{'userId':"+response.data[i].userId+",'firstName':'"+response.data[i].firstName+"',
'lastName':'"+response.data[i].lastName+"','email':'"+response.data[i].email+"'}")
                    //
                myClients.push(JSON.parse(JSON.stringify(newClient)))
                
        }
    }
    
    console.log("Length after this: "+ myClients.length); // returns 57 as expected
    myClients.map(RenderCard) // Calling to render
}

然后我嘗試使用引導程序將其渲染到卡上：

const RenderCard = (card, index) =>{ 

    return(         
            <Card border="dark" style={{ width: '18rem' }} key={index}>
            <Card.Header>Client number: {card.userId} </Card.Header>
                <Card.Body>
                    <Card.Title>Name: 
                        {card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)} 
                    </Card.Title> // Console.log returns "card firstname: undefined"
                    <Card.Text>
                        Mail: {card.email}
                    </Card.Text>
                </Card.Body>
            </Card>
        )
    
}

__

我真的不知道如何獲取正確的數據。有更好的方法嗎？ 我只是錯過了什么嗎？ 我沒有收到任何錯誤，而且由於我是新手，所以我真的不知道如何正確調試它。

Answer 1

您必須將您的響應添加到 state：

const [card, setCard] = React.useState({});
function AddClients(response){
  setCard(response.data);
}

之后，您可以使用 state 來呈現數據。 如果要渲染數組，可以使用如下代碼：

return (
  <>
    {
      cards.map(card=>         
        <Card border="dark" style={{ width: '18rem' }} key={index}>
        <Card.Header>Client number: {card.userId} </Card.Header>
            <Card.Body>
                <Card.Title>Name: 
                    {card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)} 
                </Card.Title> // Console.log returns "card firstname: undefined"
                <Card.Text>
                    Mail: {card.email}
                </Card.Text>
            </Card.Body>
        </Card>
      )
    }
  </>
);

但如果你有一張 object 卡：

return (
  <>      
      <Card border="dark" style={{ width: '18rem' }} key={index}>
        <Card.Header>Client number: {card.userId} </Card.Header>
        <Card.Body>
            <Card.Title>Name: 
                    {card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)} 
                </Card.Title> // Console.log returns "card firstname: undefined"
                <Card.Text>
                    Mail: {card.email}
                </Card.Text>
            </Card.Body>
        </Card>
      )
    }
  </>
);