Ant 设计表渲染调用连续运行

Question

我在蚂蚁中有一个表格。表列具有用户 ID。我正在使用一个函数来获取 id 并查找用户名。出于某种原因，react 不断调用该函数。

在渲染函数中，我定义了表列：

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"

它一遍又一遍地运行。我甚至尝试过一个简单的函数，它只返回一个控制台.log - 同样的事情。出于某种原因，我在"render："中的函数被一遍又一遍地调用，而不是只调用一次。

Answer 1

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

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

在这里，由于我的数据数组有 4 个元素，它只执行了 4 次。(检查下面的控制台代码框(

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

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

Answer 2

你应该在渲染中附加一个元素，比如说

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

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

Answer 3

您获取记录中的数据：

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