Question

我的蚂蚁有一张桌子。表格栏包含用户ID。我正在使用一个函数来获取ID并查找用户名。由于某些原因，react会持续调用该函数。

在render函数中，我定义了Table Column：

const columns = [
      {
        title: "Members",
        width: "200px",
        dataIndex: "members",
        key: "members",
        render: members => this.getMemberAvatars(members)
      },

这里是被调用的函数：

  getMemberAvatars(members) {
    let membersAvatars = [];
    members.forEach(userId => {
      db.collection("users")
        .doc(userId)
        .get()
        .then(doc => membersAvatars.push(doc.data().displayName));
    });
    console.log("getMemberAvatars is running");
    return members;
  }

在控制台中（连续）：

"getMemberAvatars is running"

它一遍又一遍。我什至尝试了一个仅返回console.log的简单函数-同样的事情。由于某种原因，我在“ render：”内部的函数一次又一次被调用。

Answer 1

假设您应该在渲染中附加一个元素

render: (userId) => (
 <Button
  onClick={this.getUserName(userId)}
 >
 </Button>
}

const getUserName = (userId) => (event) => {
  // Do process here
  console.log(userId)
}

Answer 2

您获得记录中的数据：

render: (record) => (
 <Button
  onClick={this.getUserName(record)}>
 </Button>
}

getUserName = (record) => {
  console.log(record.userId)
}

Answer 3

这取决于您数据中元素的数量，

https://codesandbox.io/s/elastic-easley-hu1tt

在这里，由于我的数据数组有4个元素，因此它仅执行4次。（请选中代码框下方的控制台）

例如，如果您只想将其用于特定的用户ID

https://codesandbox.io/s/frosty-robinson-hg5o5

Ant Design Table Render调用连续运行

3 个答案: