Trung tâm cá nhân
sách gpt4 ai đã đi

setState trong .map trong componentDidMount()

In lại 作者：行者123 更新时间：2023-11-30 20:02:25 28 4
mua khóa gpt4 Nike

我正在尝试找到一种解决方案，以在 componentDidMount 中的映射项上使用 setState.

Tôi đang sử dụng GraphQL连同 Gatsby返回许多 dữ liệu 项目，但要求在特定的 pathname 上是 === đến slug 状态 在组件中更新为匹配的 littleHotelierId.

propertyInit = () => {
  const pathname = location.pathname;
  trở lại (
    <>
      query={graphql`
        query {
          allContentfulProperties {
            edges {
              node {
                nhận dạng
                slug
                information {
                  littleHotelierId
                }
              }
            }
          }
        }
     `}
      render={data => {
        data.allContentfulProperties.edges.map(({ node: property }) => {
          if (pathname === property.slug) {
            !this.isCancelled &&
              this.setState({
                littleHotelierId: property.information.littleHotelierId
              });
          }
          trả về giá trị null;
        });
      }}
    />
  );
};

然后我将其拉入 componentDidMount BẰNG 

componentDidMount() {
  this.propertyInit();
}

不相关但作为引用 this.isCancelled = true; Thêm vào componentWillUnmount.

我没有收到任何错误，但是如果我 console.log(littleHotelierId) 我什么也得不到。

一开始我确实认为这可能是因为 trở lại 是 null 所以尝试给 map 一个 hằng số 并返回为

render={data => {
  data.allContentfulProperties.edges.map(({ node: property }) => {
    if (pathname === property.slug) {
      const littleHotelier =
        !this.isCancelled &&
        this.setState({
          littleHotelierId: property.information.littleHotelierId
        });
      return littleHotelier;
    }
  });
}}

但这也没有成功。

componentDidMount 的目标是将 GraphQL dữ liệu 中返回的项目映射为

componentDidMount() {
  if (path1 === '/path-slug1') {
    !this.isCancelled &&
      this.setState({
        littleHotelierId: 'path-id-1'
    });
  }
  if (path2 === '/path-slug2') {
    !this.isCancelled &&
      this.setState({
        littleHotelierId: 'path-id-2'
    });
  }
  ... // other items
}

我认为问题在于 GraphQL 以异步方式获取数据，并且此请求未在调用 componentDidMount() 时完成。如果我 console.log dữ liệu 它不会向 console 返回任何内容。我该如何解决这个问题？

1 Câu trả lời

我认为您需要创建一些经过过滤的数据作为 map 函数的结果。过滤数据后，您执行 setState({data: data})。做多个setState是不好的。

如果您的 GraphQL 返回 promise，那么您可以编写如下内容:

componentDidMount() {
  this.fetchData()
    .then(data => {
       const filteredData = data.filter(element => 
         element.someProperty === propertyValue
       );
     this.setState({ data: filteredData });
    })
}

关于javascript - componentDidMount() 中的 .map 中的 setState，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53235689/

28 4 0
Bài viết được đề xuất: C(Linux): warning: assignment discards qualifiers from pointer target type
Bài viết được đề xuất: javascript - 导入模块 NodeJS 中的所有导出
Bài viết được đề xuất: javascript - 在 Dygraph 的 Y 轴标签中添加逗号分隔符
Bài viết được đề xuất: javascript - 单击按钮后在 GoogleMaps 上选择一个点
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com