时间戳

首页 > 解决方案 > Javascript - 获取 TypeError 对于数组是不可迭代的

javascript - Javascript - 获取 TypeError 对于数组是不可迭代的

问题描述

我正在使用 react 并且我有一个组件，我在其中设置一个带有字符串数组的常量：

const propsToCheck = ['text', 'type', 'status', 'topic.name', 'class.0.code'];

checkObjectContainsValue我在从另一个文件导入的函数中将子链一直发送到正在使用它的组件：

constructor(props) {
    super(props);
    this.state.data = this.transformRows(props.rows.filter(obj => checkObjectContainsValue(obj, props.searchString)(props.propsToCheck)))
  }

我的测试失败了，因为我收到一个错误：

TypeError：propsToCheck 不可迭代

但是，我注意到如果我将checkObjectContainsValue函数导入到我拥有的父组件中，我propsToCheck不会收到错误消息。但由于其他原因，我不能在那里拥有该功能。我检查了反应开发人员工具，我可以看到我propsToCheck在子组件中获取了数组，所以我不确定为什么会出现这个错误？

这是功能checkObjectContainsValue：

const checkObjectContainsValue = (obj, value) => (propsToCheck) => {
  for (let prop of propsToCheck) {
    const propToCheckValue = prop.split('.').reduce((currentObject,property) => {
      return currentObject[property];
    }, obj);
    if (propToCheckValue.toLowerCase().includes(value.toLowerCase())) {
      return true;
    }
  }
  return false;
};

更新

如果我将逻辑移动到父组件，那么一切正常。这是一个例子：

onSearchChange(event) {
    const searchString = event.target.value;
    this.setState(prevState => {
      const filteredTasks = prevState.tasks.filter(obj => checkObjectContainsValue(obj, searchString)(propsToCheck));
      return {filteredTasks: filteredTasks};
    });
  }

为什么只有在子组件中使用此功能时才会出现此错误？

标签： javascriptreactjs

解决方案

您的函数需要三个参数

const checkObjectContainsValue = (obj, value, propsToCheck) => {

当您只是将两个参数传递给函数时

props.rows.filter(obj => checkObjectContainsValue(obj, props.searchString)

所以第三个参数的值等于undefined不可迭代

推荐阅读