setState из .map внутри componentDidMount ()

Question

Я пытаюсь найти решение для использования setState для сопоставленных элементов внутри componentDidMount.

Я использую GraphQL вместе с Гэтсби со многими возвращенными data элементами, но для определенного pathname это === до slug state обновлено в компоненте до соответствия 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 является нулевым, поэтому попытался дать map a 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

Я думаю, вам нужно создать некоторые отфильтрованные данные в результате функции карты. После того, как вы отфильтровали данные, вы делаете setState ({data: data}). Не рекомендуется делать несколько setState.

Если ваш GraphQL возвращает обещание, вы можете написать что-то вроде следующего:

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