代码之家 › 专栏 › 技术社区 › Darren

.filter(…)。则不是componentDidMount中的函数

reactjs javascript

-3

Darren · 技术社区 · 7 年前

我正在努力 filter 内部阵列 componentDidMount then setState 在…上 propertyID

componentDidMount() {
  const pathname = "/path2";
  const properties = this.props.properties;
  properties
    .edges
    .filter(node => {
      return `/${node.slug}` === pathname;
    })
    .then(node =>
      this.setState({ propertyID: node.information.propertyID })
    );
}

未捕获类型错误:properties.filter(…)。then不是函数在ProxyComponent.componentDidMount处

this.props.properties 是

{
  "edges": [
    {
      "node": {
        "id": "121323",
        "slug": "path1",
        "information": {
          "propertyID": "property1"
        }
      }
    },
    {
      "node": {
        "id": "332342",
        "slug": "path2",
        "information": {
          "propertyID": "property2"
        }
      }
    },
    {
      "node": {
        "id": "123234",
        "slug": "path3",
        "information": {
          "propertyID": "property3"
        }
      }
    }
  ]
}

3 回复 | 直到 7 年前

Nitish Narang 7 年前

你必须改变过滤线如下,它将工作。在Filter函数中,请注意我是如何使用{}表示法中的节点对象的

{
      "node": {
        "id": "121323",
        "slug": "path1",
        "information": {
          "propertyID": "property1"
        }
      }
    }

但您需要这个对象的“节点”,这就是为什么在filter函数中添加{}。

var properties = {
  "edges": [
    {
      "node": {
        "id": "121323",
        "slug": "path1",
        "information": {
          "propertyID": "property1"
        }
      }
    },
    {
      "node": {
        "id": "332342",
        "slug": "path2",
        "information": {
          "propertyID": "property2"
        }
      }
    },
    {
      "node": {
        "id": "123234",
        "slug": "path3",
        "information": {
          "propertyID": "property3"
        }
      }
    }
  ]
}

console.log(properties
    .edges
    .filter(({ node }) => `/${node.slug}` === '/path1'))

lazreg87 7 年前

componentDidMount() {
  const pathname = "/path2";
  const properties = this.props.properties;
  const filteredArray = properties
    .edges
    .filter(node => {
      return `/${node.slug}` === pathname;
    });

  filteredArray.forEach((node) => {
    // Computed property, so each node gets set separately in state
    this.setState({ [node.information.propertyID]: node.information.propertyID })
  });
}

Array.filter reference

Shota Tamura 7 年前

componentDidMount() {
  const pathname = '/path2';
  const properties = this.props.properties;

  const node = properties.edges.filter(node => {
    return `/${node.slug}` === pathname;
  });

  this.setState({ propertyID: node.information.propertyID });
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前