Question

反应新手使事情变得混乱，对不起，但确实尝试了几个小时；（请参阅下面的尝试。

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

这应该相当容易，尽管在研究了十二个答案之后，尝试了一堆可能的解决方案后，我仍然遇到错误。我不知道我在这里想念什么。

这是我的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”来自另一个包含表单的组件，该组件处理onSub提交此功能：

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);
};

非常感谢您的帮助！

Answer 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);
};

Answer 2

我遇到了同样的问题，我花了很长时间才弄明白。事实证明，我在过滤数据之前正在映射数据。当我在映射之前过滤数据时，我没有任何问题。

反应：“错误t.filter不是函数”或“错误：未捕获的TypeError：t.find不是函数”->试图更新数组中的对象

2 个答案: