Question

我认为我的代码目前的行为方式似乎prepareList不会及时更新，因此未定义，然后代码给出错误，表明filter不是函数，并且返回{ {1}}，如果没有finalGroups，则应这样做。我确定prepareList.length内的地图本身可以工作，并且prepareList后面有值（对象数组），其本身就是removedSubstitutesList数组。

如您所见，我试图通过添加完全不相关的useState和useEffect并在其中进行makeWay来阻止这种行为，以使其等待更长的时间。能够获取setWait的值。依赖项列表也是试图以某种方式使其工作以查看错误的一部分。

我的问题是：我的reduce函数本身是否错误，因此它不起作用，或者是否确实是prepareList，多个渲染等问题，以便reducer函数运行没有价值还为时过早，或者还有其他我没有注意到的东西。

此代码是更大集合的一部分，应该将这一部分收集，处理并提升准备好的数据到主应用程序组件中以供使用。 Sendpressed是一个buttonclick，liftSubstitutes和liftSubstituteGroups是将数据发送到主应用程序组件的回调。

希望我已经足够清楚地进行了跟踪，否则，我将尽力引导您完成该过程。欢迎任何建议，谢谢。

useState

Answer 1

您的假设是正确的，问题出在filter()中的reduce()。

所以Array.prototype.reduce()接受2个参数：

第一个是累加器，在您的情况下，finalGroups[0].data看起来还可以。
第二个是迭代中的当前值-filter变量。

因此，在您的情况下，我想问题是由于错误消息指出filter不是函数。从技术上讲filter是prepareList数组中的一个元素。

对于Array.prototype.filter()，您需要传递一个函数，该函数从文档中返回true或false的值：

filter（）方法创建一个新数组，其中包含所有通过提供的功能实现的测试的元素。

考虑以下解决方案：

(results, prepareListElem) => results.filter(element => {
   var passTest = false;

   // the logic to implement for passTest

   return passTest;
})

给出一个工作示例，reduce()和filter()的工作方式：

const array = [{name: 'John'}, {name: 'Jane'}];
const result = array.reduce((acc, cur) => {
   acc.push({
      ...cur,
      age: 12
   });

   return acc;
}, []);

console.log(result);

const filtered = result.filter(e => e.name.indexOf('a') !== -1);

console.log(filtered);

在我的示例中，我们在数组中具有元素，其中所有对象都具有name属性。我们正在尝试扩展age。最后，我们在name属性包含字符a的位置进行过滤。

我希望这可以帮助您弄清问题所在！

useEffect和useState带来的挑战

1 个答案: