2016-05-06 9 views
11

Ho avuto un sacco di tempo per far funzionare lo script di conteggio dei commenti sulle mie pagine di risposta. Per iniziare, si consiglia di inserire lo script nel mio file index.html, nella parte inferiore del tag <body>. L'ho fatto e non ho visto risultati.Lo script count.js di Disqus non viene eseguito correttamente in index.html con il sito web react.js

<body> 
 
    <div id="app"> 
 
    </div> 
 
    <script src="static/index.js"></script> 
 
    <script id="dsq-count-scr" src="//mtg-hunter.disqus.com/count.js" async></script> 
 
    </body>

Ho un file index.js che sta caricando tutti i miei componenti, tra cui il componente (chiamiamolo ResultComponent.js), che voglio avere il conteggio commento <span> tag. i <span> tag stessi simile a questa:

var commentCount = <span className="disqus-comment-count" onClick={function() {this.setState({currentSelectedTab: 4})}.bind(this)} 
 
\t \t \t data-disqus-identifier={idGoesHere} 
 
\t \t \t style={{fontVariant:"small-caps"}}>0 Comments</span>

Finora, così semplice. Non sto usando alcun tag <a> quindi non ho il #disqus_thread ovunque. Quando carico la mia pagina, mi aspetto che il mio commento vada a salire, ma non è così fortunato. Per verificare ciò, ho copiato lo script raw, inalterato, dallo script raw count.js (che è located here). L'ho incollato direttamente nella console di Devtools di Chrome, e ha funzionato; tutti i contatori di commenti rilevanti sono andati ai loro valori appropriati.

MODIFICA: un giorno dopo, più sollecitazione; Ho aggiunto punti di interruzione nel codice effettivo nel dominio disqus.com. Lo script nel tag script sta funzionando bene al momento giusto, tranne che manca delle variabili quando entra nella funzione displayCount(). Esistono diverse variabili a cui non vengono assegnati i valori, in modo che non possano entrare e compilare i conteggi dei commenti, sempre non riesce. Non ho idea del perché questo non funziona quando viene chiamato dal mio index.html ma non quando incollo il codice count.js non elaborato nella mia console e lo faccio lì. Non ho idea del perché.

Per chiarire, questo è il codice rilevante:

e.displayCount = function(b) { 
 
     for (var c, a, d, e = b.counts, b = b.text.comments; c = e.shift();) 
 
      if (a = j[c.id]) { 
 
       switch (c.comments) { 
 
       case 0: 
 
        d = b.zero; 
 
        break; 
 
       case 1: 
 
        d = b.one; 
 
        break; 
 
       default: 
 
        d = b.multiple 
 
       } 
 
       c = d.replace("{num}", c.comments); 
 
       a = a.elements; 
 
       for (d = a.length - 1; d >= 0; d--) 
 
        a[d].innerHTML = c 
 
      } 
 
    } 
 
    ;
Quando viene eseguito correttamente, dal mio incollare lo script nella console, è definita la variabile j. Quando viene eseguito da index.html, j non è definito, quindi non riesce al primo if. L'url di chiamata è esattamente lo stesso in entrambe le situazioni: http://mtg-hunter.disqus.com/count-data.js?1=19767&1=235597&1=373322&1=382310&1=382841&1=382866&1=383023&1=397543&1=397682&1=398434. Questo dà il parametro b e quando eseguo localmente lo script definisce j in modo che l'operatore di assegnamento in if possa funzionare (che è un modo davvero strano di farlo, ma ok).

modificare di nuovo: Tengo a precisare che sto facendo questo su un server di prova locale (localhost:3000), non so se questo fa la differenza o no?

modifica altro: La risposta alla mia domanda precedente risulta essere "no". Ho caricato il mio codice sul mio server e anche il sito di produzione ha mostrato che lo script non funzionava correttamente. Questo è assurdo ... sono fuori di idee ormai.

modifica di nuovo: Scoperta parziale ... Ho aggiunto questo codice a ResultComponent.JS:

componentDidMount() { 
 
    \t DISQUSWIDGETS.getCount(); 
 
    }, 
 

 
    componentDidUpdate() { 
 
    \t DISQUSWIDGETS.getCount(); 
 
    },

Buone notizie; quando aggiorno la pagina, mostra il conteggio dei commenti corretto! Evviva! Cattive notizie: quando cambio parti della pagina che nascondono il componente Risultato, e poi lo riporta indietro (attivando componentDidUpdate), la chiamata DISQUSWIDGETS.getCount() non funziona. Viene ancora chiamato, ma la parte dello script displayCount non viene mai eseguita, quindi il DOM non viene mai aggiornato con le nuove informazioni. È ancora un altro esempio di questo orribile script che si comporta in modo diverso nonostante venga chiamato esattamente allo stesso modo ...

+0

Sembra che reactjs stia facendo qualcosa per il contesto previsto. Puoi aggiustare 'displayCount' in modo da poter passare' j' come argomento aggiuntivo? – Ouroborus

+0

No, questo è uno script che è stato caricato/creato da disqus e si trova su mtg-hunter.disqus.com/count.js. – IronWaffleMan

+0

Sebbene non sia la soluzione migliore, sembra che tu possa aggiornare il codice. Dopo il caricamento di 'count.js', assegnare' DISQUSWIDGETS.displayCount' a una funzione più adatta ai propri gusti. O anche creare una copia locale di 'count.js' e modificarla e collegarla. Al minimo, questo potrebbe aiutare con il debug. – Ouroborus

risposta

3

OK, dopo tanto tempo avanti e indietro con il ragazzo di supporto su Disqus ho finalmente trovato una risposta; Ero vicino La soluzione è:

componentDidMount() { 
 
    \t DISQUSWIDGETS.getCount({reset:true}); 
 
    }, 
 

 
    componentDidUpdate() { 
 
    \t DISQUSWIDGETS.getCount({reset:true}); 
 
    },

venuto fuori ho dovuto passare il reset:true param, che ha permesso un pezzo di codice in getCount di fare effettivamente qualcosa. Suppongo che avrei potuto capirlo dal codice, ma incolpare la formattazione intensamente minificata (anche con gli strumenti di sviluppo di Chrome che aiutano a migliorarlo) per me è assente. Era anche nel loro articolo di knowledge base su come aggiungere i contatori di commenti, ma mi mancava il contesto (e fu assorbito dal fatto che "ovviamente doveva essere lo script che non funzionava, chiaramente").

E così termina uno dei miei più frustranti giorni di programmazione. E una lezione utile ... fai un passo indietro e guarda l'immagine grande di tanto in tanto, perché la risposta ti può fissare in faccia.