React: "Error t.filter is not a function" 或 "Error: Uncaught TypeError: t.find is not a function" --> Trying to update object in array答案

【问题标题】：React: "Error t.filter is not a function" or "Error: Uncaught TypeError: t.find is not a function" --> Trying to update object in arrayReact: "Error t.filter is not a function" 或 "Error: Uncaught TypeError: t.find is not a function" --> Trying to update object in array
【发布时间】：2018-12-13 20:46:29
【问题描述】：

React 新手搞砸了，抱歉，但真的尝试了好几个小时；（请参阅下面的尝试。

简单任务：尝试更新对象数组中的对象。

这应该很容易，尽管在研究了十几个答案之后，尝试了一堆可能的解决方案，但我仍然会出错。我无法弄清楚我在这里缺少什么。

这是我的 4 次尝试：

尝试 1

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = arrTexts.filter(x => x.id === updatedText.id);
  myObjectToUpdate = updatedText;

  console.log (myObjectToUpdate);
  console.log (arrTexts);
};

尝试 2：

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = arrTexts.find(function (myObjectToUpdate) { return myObjectToUpdate.id === updatedText.id; });
  myObjectToUpdate = updatedText

  console.log (myObjectToUpdate);
  console.log (arrTexts);
};

尝试 3

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = arrTexts.findIndex(x => x.id === updatedText.id);
  myObjectToUpdate = updatedText;

  console.log (myObjectToUpdate);
  console.log (arrTexts);
};

尝试 4

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = _.findWhere(arrTexts, { id: updatedText.id });
  myObjectToUpdate = updatedText;

console.log (myObjectToUpdate);
console.log (arrTexts);
};

“updateText”来自另一个组件，其中包含一个表单并处理 onSubmit 这个函数：

handleUpdate = event => {
  event.preventDefault();
  const updatedText = {
    ...this.props.arrText,
    id: this.idRef.current.value,
    title: this.titleRef.current.value,
    author: this.authorRef.current.value,
  };
  this.props.updateText(updatedText);
};

非常感谢您的帮助！

【问题讨论】：

标签： javascript reactjs object filter find

【解决方案1】：

filter、find 和 findIndex 都是适用于数组的函数。您的数据似乎是一个数组，但正在将其克隆到一个对象。你可以像 var arrTexts = [...this.state.arrTexts] 一样克隆它

updateText = (updatedText) => {

  var arrTexts = [...this.state.arrTexts]

  var myObjectToUpdate = arrTexts.find(function (myObjectToUpdate) { return myObjectToUpdate.id === updatedText.id; });
  myObjectToUpdate = updatedText

  console.log (myObjectToUpdate);
  console.log (arrTexts);
};

你也会像这样更新它

handleUpdate = event => {
  event.preventDefault();
  const updatedText = {
    id: this.idRef.current.value,
    title: this.titleRef.current.value,
    author: this.authorRef.current.value,
  };
  this.props.updateText(updatedText);
};

【讨论】：

非常感谢！就是这样。我在“handleUpdate ... this.props.arrText 中有这条旧线，将所有内容都更改为一个对象。浪费时间的时间......再次感谢。;)

【解决方案2】：

我遇到了同样的问题，我花了很长时间才弄清楚。原来我是在过滤数据之前映射数据。当我在映射数据之前过滤数据时，我没有任何问题。

【讨论】：