Question

我收到了这个错误，但我正在定义一个密钥。这是我的App.js抱怨的。

import React from 'react';
import Relay from 'react-relay';
import AccountTable from './AccountTable';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Account list</h1>
          {this.props.viewer.accounts.edges.map(edge =>
            <AccountTable key={edge.node.id} account={edge.node} />
          )}
      </div>
    );
  }
}

export default Relay.createContainer(App, {
    fragments: {
        viewer: () => Relay.QL`
            fragment on User {
                accounts(first: 10) {
                    edges {
                        node {
                            ${AccountTable.getFragment('account')}
                        }
                    }
                }
            }
        `,
    },
});

Answer 1

解决这个问题的最简单方法是将密钥基于地图索引：

{this.props.viewer.accounts.edges.map((edge, i) =>
    <AccountTable key={i} account={edge.node} />
)}

然后，您不必担心edge.node.id的价值有多独特。 key只需要在所有AccountTable兄弟姐妹的上下文中都是唯一的。它不需要是全球唯一的。因此，该指数运作良好。

但是，如果你有一个基于对象的稳定id，那显然更好。

Answer 2

我使用的解决方案是提取relay fragment的底层id作为key

{this.props.viewer.accounts.edges.map((edge) =>
    edge && e.node && <AccountTable key={edge.node.__id} account={edge.node} />
)}

反应警告：数组或迭代器中的每个子项都应该有一个唯一的＆＃34;键＆＃34;支柱。检查`App`

2 个答案: