Nano Hash - криптовалюты, майнинг, программирование

React отображает дочерний компонент только один раз

Я пытаюсь заполнить компонент TreeView по запросу. Я получаю данные в функции componentDidMount, а затем вставляю эти данные в массив в основном состоянии компонента. ComponentDidUpdate используется для установки массива данных в корневой узел древовидного представления. Дело в том, что древовидное представление не отображает данные, если они не поступают статическим образом, по запросу они просто ничего не показывают. Вот код:

constructor (props) {
    super(props);
    this.state = {
      data: []
    };
    this.tree = {
      idx: 0,
      descript: 'Root',
      collapsible: true,
      collapsed: false
    };
  }

  receivingData = (data = []) => {
    this.setState({data: data});
  }

  componentDidMount () {
    fetchData(this.receivingData);
  }

componentDidUpdate (prevProps, prevState) {
    if (prevState.data.length !== this.state.data.length) {
      this.tree.children = [];
      for (let x of this.state.data) {
        this.tree.children.push({
          idx: x.idx,
          descript: x.name,
          collapsible: true,
          collapsed: false
        });
      }
    }
  }

А это метод рендеринга:

render () {
   console.log('getting here', this.tree);
    return (
      <div>
            <TreeView
              onNodeSelectionChange={this.onTreeNodeSelection} ref={this.treeViewContainerRefBuilder}
              data={this.tree} selectLeavesOnly={false} singleSelect/>
        </div>
      </div>
    );
  }

Журнал консоли показывает мне изменения дерева, но TreeView отображается только один раз. Что я делаю неправильно?


Ответы:


1

Я считаю, что проблема, с которой вы столкнулись, заключается в том, что, хотя receivingData вызовет повторную визуализацию, вы редактируете this.tree в методе componentDidUpdate, который происходит после повторной визуализации, поэтому ваш компонент TreeView не будет повторно визуализироваться с обновленными данными.

Попробуйте использовать componentWillUpdate вместо componentDidUpdate, чтобы this.tree был изменен до повторного рендеринга.

02.06.2017
  • Спасибо, мистер CD-jS, я сделал то, что вы предложили, и все осталось по-прежнему. Я помещаю дерево в состояние, и тоже ничего не происходит. 02.06.2017

  • 2

    Это должно решить вашу проблему:

    constructor (props) {
    super(props);
    this.state = {
      data: []
    };
    this.tree = {
      idx: 0,
      descript: 'Root',
      collapsible: true,
      collapsed: false
    };
    }
    
    receivingData = (data = []) => {
    if (prevState.data.length !== data.length) {
        this.tree.children = [];
        for (let x of this.state.data) {
          this.tree.children.push({
            idx: x.idx,
            descript: x.name,
            collapsible: true,
            collapsed: false
          });
        }
      }
    this.setState({data: data});
    }
    
    componentDidMount () {
     fetchData(this.receivingData);
    }
    
    componentDidUpdate (prevProps, prevState) {
    
    }
    

    Примечание. Не используйте componentWillUpdate, поскольку эти методы считаются устаревшими, и вам следует избегать их использования в новом коде. Обратитесь к https://reactjs.org/docs/react-component.html

    Надеюсь это поможет :)

    08.03.2019
    Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..