Reactjs React钩子JSX渲染无法正常工作

我有5个从API返回的持卡人，我需要渲染所有5个持卡人，但它只渲染第一个持卡人。当我记录持卡人时，它记录的是5个持卡人的阵列。但是在我映射它们并在我的

renderCardHolders

中返回JSX之后，它只渲染第一个返回的用户。有人能帮我吗

function UserContainer (props) {
    const [cardHolders, setCardHolders] = useState([{}])

        useEffect(() => {
        props.fetchedData.map(user => {
            try {
                const uuid = user.Guid
                const response = Api.get(`/securityCenterApi/getCredentials/${uuid}`)
                .then(response => {
                    const cardHolderCredentials = response.data.Rsp.Result.Credentials    
                    const newGuid = Api.get(`/securityCenterApi/getUsers/${cardHolderCredentials}`)
                    .then(response => {
                        
                        const userName = response.data.Rsp.Result.Cardholder.Name
                        const bitLength = response.data.Rsp.Result.Format.BitLength
                        const facilityCode = response.data.Rsp.Result.Format.Facility
                        const cardNumber = response.data.Rsp.Result.Format.CardId
                        
                        setCardHolders([{
                            username: userName,
                            bitLength: bitLength,
                            facilityCode: facilityCode,
                            cardNumber: cardNumber
                        }])
                    }
                    )
                })
            } catch (err) {
                console.log(err)
            }
        
        })
}, [props.fetchedData])

    // console.log(cardHolders)
    const renderCardHolders = () => {
        return cardHolders.map((cardHolder, index) => {
                console.log(cardHolder)
            return (
                <tr key={index}>
                    <th>{cardHolder.username}</th>
                    <td>{cardHolder.bitLength}</td>
                    <td>{cardHolder.facilityCode}</td>
                    <td>{cardHolder.cardNumber}</td>
                </tr>
            )
        })
    }

    return (
    <table className="table">
        <thead>
            <tr>
            <th><abbr title="Position">Cardholder name</abbr></th>
            <th>Wiegand Bit type</th>
            <th><abbr title="Played">Facility Code</abbr></th>
            <th><abbr title="Won">Card number</abbr></th>
            </tr>
        </thead>
        <tbody>
            {renderCardHolders()}
        </tbody>
    </table>
    )
}

export default UserContainer

function用户容器（props）{
常量[持卡人，设置持卡人]=useState（[{}]）
useffect（（）=>{
props.fetchedData.map（用户=>{
试一试{
const uuid=user.Guid
const response=Api.get（`/securityCenterApi/getCredentials/${uuid}`）
。然后（响应=>{
const cardentials=response.data.Rsp.Result.Credentials
const newGuid=Api.get（`/securityCenterApi/getUsers/${candardCredentials}`）
。然后（响应=>{
const userName=response.data.Rsp.Result.cardender.Name
常量比特长度=response.data.Rsp.Result.Format.bitLength
const facilityCode=response.data.Rsp.Result.Format.Facility
const cardNumber=response.data.Rsp.Result.Format.cardd
持卡人([{
用户名：用户名，
bitLength:bitLength，
设备代码：设备代码，
卡号：卡号
}])
}
)
})
}捕捉（错误）{
console.log（错误）
}
})
}，[props.fetchedData]）
//控制台日志（持卡人）
常量renderCardHolders=（）=>{
返回持卡人。地图（（持卡人，索引）=>{
控制台日志（持卡人）
返回(
{持卡人.用户名}
{持卡人.位长度}
{持卡人设施代码}
{持卡人卡号}
)
})
}
返回(
持卡人姓名
Wiegand位类型
设施代码
卡号
{renderCardHolders（）}
)
}
导出默认用户容器

---

提前谢谢

我模拟了API调用，一切似乎都正常。然而，在基于代码模拟时，第一个API调用似乎只返回一个用户。您的意思是将状态设置为对象数组吗？比如：

setCardHolders(prev => [...prev, {
  username: userName,
  bitLength: bitLength,
  facilityCode: facilityCode,
  cardNumber: cardNumber
}])

此外，您可能希望使用空数组初始化状态：

const [cardHolders, setCardHolders] = useState([]);

以下是一份：

import React，{useffect，useState}来自“React”；
导入“/styles.css”；
函数UserContainer（props）{
常量[持卡人，设置持卡人]=使用状态（[]）；
useffect（（）=>{
props.fetchedData.forEach（（用户）=>{
试一试{
const uuid=user.Guid；
日志（“uuid”，uuid）；
承诺，决心({
数据：{Rsp:{Result:{Credentials:“testcreds”}
})。然后（（响应）=>{
const cardentials=response.data.Rsp.Result.Credentials；
console.log（持卡人凭证）；//验证
承诺，决心({
数据：{
可吸入悬浮粒子：{
结果:{
持卡人：{Name:“测试名称”}，
格式：{
比特长度：1，
卡迪：“卡迪1”，
设施：“我的设施”
}
}
}
}
})。然后（（响应）=>{
const userName=response.data.Rsp.Result.candler.Name；
常量比特长度=response.data.Rsp.Result.Format.bitLength；
const facilityCode=response.data.Rsp.Result.Format.Facility；
const cardNumber=response.data.Rsp.Result.Format.cardd；
设置持卡人（（上一个）=>[
…上一页，
{
用户名：用户名，
bitLength:bitLength，
设备代码：设备代码，
卡号：卡号
}
]);
});
});
}捕捉（错误）{
控制台日志（err）；
}
});
}，[props.fetchedData]）；
//控制台日志（持卡人）
常量renderCardHolders=（）=>{
返回持卡人。地图（（持卡人，索引）=>{
控制台日志（持卡人）；
返回(
{持卡人.用户名}
{持卡人.位长度}
{持卡人设施代码}
{持卡人卡号}
);
});
};
返回(
持卡人姓名
Wiegand位类型
设施代码
卡号
{renderCardHolders（）}
);
}
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

谢谢你，杰克！我在将setState设置为数组时遇到了一个问题，您的回答解决了这个问题。谢谢！嘿，Jack，当我在处理上述代码时，每次单击按钮都会将持卡人添加到先前呈现的持卡人中。例5点击按钮后呈现的持卡人。当我再次单击按钮时，前5名持卡人中增加了5名持卡人，因此总共有10名持卡人。当我点击按钮时，我需要重新渲染。我不确定你指的是什么按钮，但听起来你好像在向现有列表中添加一个新的项目列表。我会检查你的setState调用，确保逻辑正确。按钮在父组件中，我认为我有

import React, { useEffect, useState } from "react";
import "./styles.css";

function UserContainer(props) {
  const [cardHolders, setCardHolders] = useState([]);

  useEffect(() => {
    props.fetchedData.forEach((user) => {
      try {
        const uuid = user.Guid;
        console.log("uuid", uuid);
        Promise.resolve({
          data: { Rsp: { Result: { Credentials: "testcreds" } } }
        }).then((response) => {
          const cardHolderCredentials = response.data.Rsp.Result.Credentials;
          console.log(cardHolderCredentials); // Verify
          Promise.resolve({
            data: {
              Rsp: {
                Result: {
                  Cardholder: { Name: "Test Name" },
                  Format: {
                    BitLength: 1,
                    CardId: "CardId1",
                    Facility: "My Facility"
                  }
                }
              }
            }
          }).then((response) => {
            const userName = response.data.Rsp.Result.Cardholder.Name;
            const bitLength = response.data.Rsp.Result.Format.BitLength;
            const facilityCode = response.data.Rsp.Result.Format.Facility;
            const cardNumber = response.data.Rsp.Result.Format.CardId;

            setCardHolders((prev) => [
              ...prev,
              {
                username: userName,
                bitLength: bitLength,
                facilityCode: facilityCode,
                cardNumber: cardNumber
              }
            ]);
          });
        });
      } catch (err) {
        console.log(err);
      }
    });
  }, [props.fetchedData]);

  // console.log(cardHolders)
  const renderCardHolders = () => {
    return cardHolders.map((cardHolder, index) => {
      console.log(cardHolder);
      return (
        <tr key={index}>
          <th>{cardHolder.username}</th>
          <td>{cardHolder.bitLength}</td>
          <td>{cardHolder.facilityCode}</td>
          <td>{cardHolder.cardNumber}</td>
        </tr>
      );
    });
  };

  return (
    <table className="table">
      <thead>
        <tr>
          <th>
            <abbr title="Position">Cardholder name</abbr>
          </th>
          <th>Wiegand Bit type</th>
          <th>
            <abbr title="Played">Facility Code</abbr>
          </th>
          <th>
            <abbr title="Won">Card number</abbr>
          </th>
        </tr>
      </thead>
      <tbody>{renderCardHolders()}</tbody>
    </table>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <UserContainer fetchedData={[{ Guid: "1" }, { Guid: "2" }]} />
    </div>
  );
}