Question

我正在使用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的父组件中，则不会收到该错误。但是由于其他原因，我无法在那儿拥有该功能。我已经检查了react开发人员工具，可以看到我在子组件中得到了数组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};
    });
  }

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

Answer 1

您的函数需要三个参数

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

您刚刚在函数中传递了两个参数

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

因此第三个参数的值将等于undefined，这是不可迭代的

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

1 个答案: