将 API 数据推送到嵌套数组并呈现结果

Question

我正在调用一个 API 来获取一组用户，对他们进行排序，如果personalTrainerId 等于我的userId，则将它们放入一个数组中，然后将它们呈现为卡片。

我想接收数据

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

但是我得到了结果

MyClients: {'userId':86,'firstName':'Client','lastName':'23','email':'newclient@ab'},{'userId':96,'firstName': 'cl','lastName':'ie','email':'cl@ie'},

（不带括号）

我从调用中得到响应，但是当我尝试渲染它们时，对象返回为“未定义”——我对此很陌生，我可能会完全错误地处理它。任何帮助将不胜感激。

我将响应添加到数组的代码：

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

您必须将您的响应添加到一个状态：

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

之后，您可以使用该状态来呈现数据。如果你想渲染一个数组，你可以使用如下代码：

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>
      )
    }
  </>
);

但如果你有卡片对象：

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>
      )
    }
  </>
);