使用来自州的数据填充 ant design Table

Question

我是 reactJS 的新手，我遇到了这个问题：我必须用 API

中的数据填充 table

问题：我只能用 const 变量填充 table，而不能在 useEffect 函数中填充。

代码：

function CandidaturesList() {
  const [candidatures , setCandidatures]=useState(null);
  useEffect(() => {

    async function fetchData() {
      try {

        
        const response = /*some code to get data*/
        setCandidatures(response);
        
      } catch (error) {
        // Catch any errors for any of the above operations.
        alert(
          `Failed to load  `,
        );
        console.error(error);
      } 
    }
    fetchData();

  },[candidatures]);
  

  // project table start
  const project = [
    {
      title: "COMPANIES",
      dataIndex: "name",
      width: "32%",
    },
    {
      title: "JOB TITLE",
      dataIndex: "jobtitle",
    },
    {
      title: "DECISION",
      dataIndex: "decision",
    },

  ];
  const candidature = [
    {
      key: "1",

      name: (
        <>
          <div className="avatar-info">
            <Title level={5}>Spotify Version</Title>
          </div>
        </>
      ),
      jobtitle: (
        <>
          <div className="semibold">Manager</div>
        </>
      ),
      decision: (
        <>
          <div className="ant-progress-project">
            <Tag icon={<CheckCircleOutlined />} color="#87d068">
              Valid
            </Tag>
          </div>
        </>
      ),
    },

    {
      key: "2",
      name: (
        <>
          <div className="avatar-info">
            <Title level={5}>Progress Track</Title>
          </div>
        </>
      ),
      jobtitle: (
        <>
          <div className="semibold">Developer full stack</div>
        </>
      ),
      decision: (
        <>
          <div className="ant-progress-project">
            <Tag icon={<SyncOutlined spin />} color="#108ee9">
              Processing
            </Tag>
          </div>
        </>
      ),
    },
]
return (
        <div className="table-responsive">
          <Table
            columns={project}
            dataSource={candidature}
            pagination={false}
            className="ant-border-space"
          />
        </div>
);}

所以 const 候选人只是有一个假数据并且候选人状态正在将真实数据放入 table 问题是：如何映射“candidatures”状态以将数据放入与“const candidature”相同样式的 table 或者如何将“candidatures”的数据放入此 const？这里要注意的一件事是 candidatures 状态变量是对象数组，例如

{[titre_poste: 'developeur full stack', nomCompagnie: 'nomCompagnie',decision: "none",id: "2"],[ ... ] }```

Answer 1

首先，我看到 candidatures 是你的 data 而 projects 是你的 table schema 你不应该把 html 放在你的 data 数组中，你应该在你的 schema 数组中使用 render 键，在你的例子中是 projects.

它应该看起来像这样

// project table start
  const project = [
    {
      title: "COMPANIES",
      dataIndex: "name",
      width: "32%",
      render: text => (
          <div className="avatar-info">
            <Title level={5}>{text}</Title>
          </div>
      )
    }
  ]

  const candidature = [
    {
      key: "1",
      name: "Some string value"
    }
]

其次，在您的 useEffect 函数中，您通过对 candidatures 的依赖创建了一个递归。您正在侦听 candidatures 中的变化，而每次发生变化时，您都会触发一个 api 调用，该调用会更改 candidatures 状态，进而再次触发 useEffect 调用。

为防止这种情况，删除 candidatures 作为 useEffect 依赖项。

使用来自州的数据填充 ant design Table

fill ant design Table with data from state

javascript

reactjs

antd