Могу ли я вернуть Компоненты внутри функции обратного вызова функции? - PullRequest
Новая
       8

Могу ли я вернуть Компоненты внутри функции обратного вызова функции?

0 голосов
/ 05 февраля 2019

Я надеюсь смонтировать класс компонента внутри итерации карты массива.Поскольку массив прошел два преобразования, у меня есть две функции для обработки этого преобразования, но последние компоненты не монтируются.

Статьи представлены в виде блога днем.С GraphQL я получаю список всех дней публикации статьи {listDates ()}.Затем мне нужно получить только уникальные даты и убедиться, что они в обратном порядке {sortDates ()}.С этим массивом мне нужно вставить отдельные даты в их собственный компонент, где выполняется другой запрос, чтобы отобразить все статьи за этот день. 

import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import { gql } from "apollo-boost";
import { graphql } from "react-apollo";
import PostsDay from "./postsDay";
var dateFormat = require("dateformat");
var array = require("lodash/array");
var collection = require("lodash/collection");

 const getDatesQuery = gql`
   {
     posts(where: { status: "published" }) {
        published
     }
    }
  `;

 class PostsFeed extends Component {
   sortDates = allDates => {
     let uniqueSortedDates = array.reverse(
       array.uniq(collection.sortBy(allDates))
     );

      uniqueSortedDates.map((d, index) => {
        console.log("should be posting", d);
        return <PostsDay key={index} artDate={d} />;
      });
    };
    listDates = (data, allDates, sortDates) => {
      data.posts.forEach(post => {
        allDates.push(dateFormat(post.published, "yyyy-mm-dd"));
     });
sortDates(allDates);
    };
   render() {
     let data = this.props.data;
let allDates = [];

if (data.loading) {
  return "Loading...";
} else {
  return <div>{this.listDates(data, allDates, this.sortDates)} . 
 </div>;
     }
    }
  }

  export default graphql(getDatesQuery)(
    withStyles(styles, { withTheme: true })(PostsFeed)
   );

Я ожидаю загрузки всех своих компонентов.Консоль читает следующее: 

 should be posting 2017-11-14
 should be posting 2017-11-13
 should be posting 2017-11-11
 should be posting 2017-11-04
 ...

, поэтому мы попадаем в функцию {sortDates ()}, но не визуализируем компонент.Что я не понимаюПожалуйста помоги.Спасибо всем.

1 Ответ

0 голосов
/ 08 февраля 2019

Понимание @Quentin очень помогло.Я смог очистить код и заставить все работать правильно. 

class PostsFeed extends Component {
  state = {
    uniqueSortedDates: []
  };

  componentDidUpdate(prevProps) {
    const { data } = this.props;
    if (!data.loading && data.posts !== prevProps.data.posts) {
      this.listDays(data);
    }
  }

  listDays = data => {
    let allDates = [];
    data.posts.forEach(post => {
      allDates.push(dateFormat(post.published, "yyyy-mm-dd"));
    });
    const uniqueSortedDates = array.reverse(
      array.uniq(collection.sortBy(allDates))
    );
    this.setState({ uniqueSortedDates: uniqueSortedDates });
  };

  render() {
    const { uniqueSortedDates } = this.state;
    return (
      <div>
        {uniqueSortedDates.slice(0, 5).map(date => {
          return <PostsDay key={date} artDate={date} />;
        })}
      </div>
    );
  }
}
...