javascript - componentDidMount() 中的 .map 中的 setState

Question

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

我正在使用 GraphQL连同 Gatsby返回许多 data 项目，但要求在特定的 pathname 上是 === 到 slug 状态 在组件中更新为匹配的 littleHotelierId。

propertyInit = () => {
  const pathname = location.pathname;
  return (
    <StaticQuery
      query={graphql`
        query {
          allContentfulProperties {
            edges {
              node {
                id
                slug
                information {
                  littleHotelierId
                }
              }
            }
          }
        }
     `}
      render={data => {
        data.allContentfulProperties.edges.map(({ node: property }) => {
          if (pathname === property.slug) {
            !this.isCancelled &&
              this.setState({
                littleHotelierId: property.information.littleHotelierId
              });
          }
          return null;
        });
      }}
    />
  );
};

然后我将其拉入 componentDidMount 作为

componentDidMount() {
  this.propertyInit();
}

不相关但作为引用 this.isCancelled = true; 添加到 componentWillUnmount。

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

一开始我确实认为这可能是因为 return 是 null 所以尝试给 map 一个 const 并返回为

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 data 中返回的项目映射为

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 data 它不会向 console 返回任何内容。我该如何解决这个问题？

Answer 1

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

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

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