Почему виджет твиттера не повторно отображает reactjs

Я использую встроенную шкалу времени Twitter в своем приложении, чтобы показать ленту Twitter учетной записи компании.

Когда я получаю результат от API, состояние меняется на правильные значения, но виджет twitter, похоже, не меняется.

TwitterCard.js

import React from "react";

export class TwitterCard extends React.Component{
    render() {
        return (
            <a className = "twitter-timeline" href = {this.props.href} data-height = "100%">Tweets by {this.props.ticker}</a>
        )
    }
}

Я приложил скриншоты выходных данных плагина React для доказательства изменения состояния.

Почему виджет твиттера не повторно отображает reactjs

Почему виджет твиттера не повторно отображает reactjs

Родительский класс довольно большой, поэтому я опубликовал метод рендеринга:

render() {
        return (
            <div>
                <NavBar/>
                <div className = "container-fluid">
                    <div className = "row">
                        <NavBarSide clickHandler = {(url) => this.handleNavClick(url)}/>
                        <Dashboard
                            errorChart = {this.state.errorChart}
                            twitter = {this.state.twitter}
                            status = {this.state.status}
                        />
                    </div>
                </div>
            </div>
        )
    }

Родитель передает эти значения на панель инструментов:

import React from "react";

import { Switch, Route } from 'react-router-dom';
import { Chart } from "./Chart";
import { TwitterCard } from "./TwitterCard";


export class Dashboard extends React.Component {

    render() {
        return (
            <div className = "col-md-9 ml-sm-auto col-lg-10 pt-2 px-3">
                <div className = "row">
                    <div className = "col-lg-8">
                        <div className = "row">
                            <div className = "col-lg-6">
                                <div className = "card border-0">
                                    <div className = "card-body">
                                        <Chart chart = {this.props.errorChart}/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className = "col-lg-4">
                        <TwitterCard href = {this.props.twitter} ticker = {this.props.ticker}/>
                    </div>
                </div>
            </div>
        )
    }
}

Можете опубликовать родителя?

J Livengood 20.03.2018 23:56

Родительский класс - это довольно большой класс, который многое делает. Будет ли полезен метод рендеринга?

user5948213 20.03.2018 23:57

Возможно, этого может быть достаточно, чтобы определить проблему

J Livengood 20.03.2018 23:58

Я все еще не вижу, где рендерится <TwitterCard />

J Livengood 21.03.2018 00:01

Ааа, <TwitterCard/> отображается на приборной панели, так что я опубликую это.

user5948213 21.03.2018 00:02

Показать компонент Dashboard.

PassionInfinite 21.03.2018 00:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
369
1

Ответы 1

Вы можете принудительно обновить компонент twitter при изменении тикета, введя его с помощью тикера в том месте, где вы его визуализируете, в компоненте панели инструментов:

<TwitterCard
  key = {this.props.ticker}
  href = {this.props.twitter}
  ticker = {this.props.ticker}
/>

При добавлении этого я получаю ошибку Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

user5948213 21.03.2018 00:28

Можете ли вы попробовать добавить <div> вокруг <a> в свой компонент TwitterCard? Я считаю, что другая библиотека манипулирует узлом, который мы ввели, вызывая эту проблему.

J Livengood 21.03.2018 00:34

Добавление div остановило ошибку, но теперь виджет не перерисовывается. Изменилась ручка, что является шагом в правильном направлении.

user5948213 21.03.2018 00:38

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

J Livengood 21.03.2018 00:39

Я посмотрю :) Приветствую всех за помощь.

user5948213 21.03.2018 00:42

Другие вопросы по теме