React / ES6 - 有效更新数组中对象的属性

Question

我正在寻找使用现代 JavaScript 更新数组中对象属性的最有效方法。 我目前正在执行以下操作，但速度太慢，因此我正在寻找一种可以加快速度的方法。 此外，为了将其放在上下文中，此代码在 React 应用程序的 Redux Saga 中使用，并在用户在编辑器中编写代码时的每次按键* 时调用。

*好吧，不是每次击键。 我确实实施了去抖和节流，我只是想专注于更新，但我感谢每个人都注意到这一点:)

function* updateCode({ payload: { code, selectedFile } }) {
  try {
    const tempFiles = stateFiles.filter(file => file.id !== selectedFile.id);

    const updatedFile = {
      ...selectedFile,
      content: code,
    };

    const newFiles = [...tempFiles, updatedFile];
  }
  catch () {}
}

以上工作，但太慢了。

我也尝试过使用 splice，但我得到了 Invariant Violation: A state mutation

const index = stateFiles.findIndex(file => file.id === selectedFile.id);
const newFiles = Array.from(stateFiles.splice(index, 1, { ...selectedFile, content: code }));

Answer 1

你可以使用Array.prototype.map来构建你的新数组：

const newFiles = stateFiles.map(file => {
  if (file.id !== selectedFile.id) {
    return file;
  }
  return {
    ...selectedFile,
    content: code,
  };
});

此外，请考虑使用去抖动，以免在每次击键时都运行您的代码。