Question

我收到以下错误，我理解它告诉我的内容，但我无法弄清楚如何解决问题。

flattenChildren(...): Encountered two children with the same key...

我的网页上有2个包含电子邮件的列表。我的应用的初始状态包含以下数据：

const initialState = {

  emails: [
    {
      id: 1, from: 'test.1@test.co.uk', body: 'test1 body', title: 'test 1 title',
    },
    {
      id: 2, from: 'test.2@test.co.uk', body: 'test2 body', title: 'test 2 title',
    },
  ],

  draggedEmails: [],

};

我的应用程序的UI允许您将项目从第一个列表（电子邮件）拖放到第二个列表（draggedEmails）。

在我的Redux reducer中，我有以下代码在列表之间移动电子邮件。

  let newState = {};

  //Check if the email exists in my 'emails' array
  const doesExistInEmails = state.emails.find(x => x.id === action.id) !== null;

  //If it exists then move it to the 'draggedEmails' list
  if (doesExistInEmails) {

    const filteredEmails = state.emails.filter(e => e.id !== action.emailItem.id);

    newState = Object.assign(
      {},
      state,
      { draggedEmails: [...state.draggedEmails, action.emailItem], emails: filteredEmails }
      );

  } else {

    const filteredEmails = state.emails.filter(e => e.id !== action.emailItem.id);

    newState = Object.assign(
      {},
      state,
      { draggedEmails: [...state.emails, action.emailItem], emails: filteredEmails });
  }

  return newState;

将项目移动到“拖动电子邮件”列表后，将项目BACK移动到电子邮件列表时会出现问题。

以下代码用于创建元素和键。

createEmailItem(em) {
    return React.createElement(
      EmailItem, { email: em, key: `${em.id}` });
 }

感谢任何帮助，

感谢。

编辑：将一个项目从“电子邮件”列表移动到“拖动电子邮件”列表后的Console.Logged状态。一切看起来都应该如此。

Object {emails: Array[1], draggedEmails: Array[1]}

EDIT2：添加渲染方法。

render() {
    return (
    <div className="email-container" onDrop={this.onDrop} onDragOver={this.allowDrop}>
          {this.props.emails.map(this.createEmailItem)}
    </div>
    );
}

Answer 1

我发现了问题。有4个。

首先是以下内容正在返回＆＃39; undefined＆＃39;而不是＆＃39; null＆＃39;

const doesExistInEmails = state.emails.find(x => x.id === action.id) !== null;

第二个是我的动作没有id，我的动作有一个有id的emailItem

const doesExistInEmails = state.emails.find(x => x.id === action.emailItem.id) !== undefined;

第三是我正在过滤我的电子邮件，而不是在下一行中拖动电子邮件。

const filteredEmails = state.filter(e => e.id !== action.emailItem.id);

最后我在设置状态时分配了错误的值。

{ draggedEmails: [...state.emails, action.emailItem], emails: filteredEmails });

应该......

{ emails: [...state.emails, action.emailItem], draggedEmails: filteredEmails });

总的来说，我有很多错误......

感谢评论的人。

反复重复键错误

1 个答案: