Reagieren: Rendern Sie ein einfaches Zitat aus JSON-Datei

Question

Ich bin neu zu reagieren und fragte mich, was ist die "richtige" Möglichkeit, ein Zitat von JSON-Datei auf Seite zu rendern, wenn die Komponente geladen wird.

Ich versuchte mit diesem, aber manchmal zieht es alle Anführungszeichen und rendert sie alle auf der Seite.

import React, { Component } from 'react'; 
import * as Quotes from '../utils/quotes'; 

class Home extends Component { 

    getRandomQuote() { 
     let keys = Object.keys(Quotes) 
     return Quotes[keys[keys.length * Math.random() << 0]]; 
    } 

    render() { 
     return (
      <div> 
       <div className="PageContainer"> 
        <h1>Welcome</h1> 
        <div id="quotes">Here is a quote for you:<p id="quote_text">{this.getRandomQuote()}</p></div> 
       </div> 
      </div> 
     ); 
    } 
} 

Dies ist ein kurzer Teil den Inhalt der JSON-Datei zu demonstrieren:

[ 
    "Life isn’t about getting and having, it’s about giving and being. - Kevin Kruse", 
    "Whatever the mind of man can conceive and believe, it can achieve. - Napoleon Hill", 
    "Strive not to be a success, but rather to be of value. - Albert Einstein" 
] 

Answer 1

Der Inhalt, den Sie ein array eingefügt ist, so dass Sie nicht brauchen, um Object.keys auf diese zu verwenden. Erzeugen Sie direkt einen Zufallsindex, indem Sie Math.random() verwenden und das Ergebnis zurückgeben.

Schreiben Sie die Funktion wie folgt:

getRandomQuote() { 
    return Quotes[(Quotes.length * Math.random()) << 0]; 
} 

den Arbeits Schnipsel prüfen:

let Quotes = ["Life isn’t about getting and having, it’s about giving and being. - Kevin Kruse", 
 
    "Whatever the mind of man can conceive and believe, it can achieve. - Napoleon Hill", 
 
    "Strive not to be a success, but rather to be of value. - Albert Einstein" 
 
] 
 

 
let i = Quotes.length; 
 

 
function getRandomQuote() { 
 
    return Quotes[(Quotes.length * Math.random()) << 0]; 
 
} 
 

 
while(i--) 
 
    console.log(getRandomQuote());