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

Question

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

非常感谢您的帮助！

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

好吧，就像 4 个解决方案：

可能只是在调用过滤器或查找函数之前尚未加载数据。所以我经常尝试的一些故障排除方法是：

1. 只需在语句块周围使用 try{} catch{} 即可避免此错误。 Try Catch 可以使页面不会崩溃，并且数据很多次只是在一秒钟后加载。这就是您知道自己是否擅长 JavaScript 的方式。

2. 使用条件渲染，并且在条件为真之前不要尝试方法。例如： if(data != null || undefined){ "运行过滤函数崩溃"}

同样非常重要的是，不要忘记，如果您位于返回部分下方并且必须在 JSX 中执行此操作，那么只需执行 JSX 条件，例如 {data != null ? data : null} （对于 JSX，我认为它不接受第二个语句。2 个 OR 语句可能不起作用。它只会遵循您所说的最后一个条件。

3. 使用异步等待。使该方法在等待数据之前不运行。并使任务同时运行。让同步读码器继续运行下面的代码，直到需要数据的方法最终获得运行所需的数据。

4. 好的，所以不推荐这样做。但为了你的理智，万一我之前说的三件事仍然不起作用。不要忘记您始终可以自己定义初始数组对象。假设您要映射一个空白数组对象 [{}]。只需将对象定义为顶部，您甚至可以使其看起来像初始加载的东西，如果您确实喜欢 const object = [{id: "...", email: "..."}]。在这种情况下，必须映射某些内容，并且需要的数据可以稍后加载。