Я использую встроенную шкалу времени 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 для доказательства изменения состояния.
Родительский класс довольно большой, поэтому я опубликовал метод рендеринга:
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>
)
}
}
Родительский класс - это довольно большой класс, который многое делает. Будет ли полезен метод рендеринга?
Возможно, этого может быть достаточно, чтобы определить проблему
Я все еще не вижу, где рендерится <TwitterCard />
Ааа, <TwitterCard/> отображается на приборной панели, так что я опубликую это.
Показать компонент Dashboard.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы можете принудительно обновить компонент 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.
Можете ли вы попробовать добавить <div> вокруг <a> в свой компонент TwitterCard? Я считаю, что другая библиотека манипулирует узлом, который мы ввели, вызывая эту проблему.
Добавление div остановило ошибку, но теперь виджет не перерисовывается. Изменилась ручка, что является шагом в правильном направлении.
Вы изучали систему отслеживания проблем библиотеки, которую используете для управления узлом и отображения твитов?
Я посмотрю :) Приветствую всех за помощь.
Можете опубликовать родителя?