Ant Design Table Render 不断调用函数答案

【问题标题】：Ant Design Table Render calls function continuouslyAnt Design Table Render 不断调用函数
【发布时间】：2019-12-20 03:13:19
【问题描述】：

我在 ant 中有一张桌子。表列具有用户 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"

它一遍又一遍地运行。我什至尝试了一个简单的函数，它只返回一个 console.log - 同样的事情。出于某种原因，我在“渲染：”中的函数被一遍又一遍地调用，而不是只调用一次。

【问题讨论】：

连续是什么意思？
意思是，函数一遍遍地运行。我在上面澄清了。

标签： reactjs antd

【解决方案1】：

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

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

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

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

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

【讨论】：

这很有帮助。所以我必须对数据源有问题。一定是我获取firebase数据的方式。谢谢。
原来父组件正在重新渲染。一旦我解决了这个问题，这个问题就解决了。

【解决方案2】：

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

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

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

【讨论】：

我需要它在没有用户操作（即按钮）的情况下运行。我正在渲染数据。

【解决方案3】：

你得到记录中的数据：

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

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

【讨论】：

我需要它在没有用户操作（即按钮）的情况下运行。我正在渲染数据。