Zustand als Requisiten in React

Question

übergeben Ich habe meine Hauptkomponente namens App.

App zieht in der Table Komponente wie so

<Table 
    players={players} 
/> 

Spieler in dem App-Komponenten-Zustand als eine leere Array anfänglich definiert ist.

aber in meiner Table Komponente ich dies tun:

console.log(this.props.players, 'players'); 

warum würde ich nicht definiert werden?

auch habe ich dies in meiner App-Komponente:

<Table 
    players={this.state.players} 
/> 

Auf diese Weise sind Sie immer Spieler aus Ihrem:

render() { 
    const { players, matches } = this.state; 

Answer 1

In Bezug auf meinem Kommentar in Ihrer Frage, die Sie so etwas wie dies tun müssen, Zustand. Ohne "this.state" Sie erhalten und nicht definierten Fehler

Answer 2

Sie sollten die ähnliche

this.props.state.players` 

object/array vom state Referenz Oder Sie können die Destructuring assignment of ES6 wie so verwenden:

const { players } = this.state; 

Beispiel:

const Table = ({ players }) => { 
 
    return (
 
    <table> 
 
     <thead> 
 
     <th>Name</th> 
 
     </thead> 
 
     <tbody> 
 
     { 
 
      players.map(player => { 
 
      return (
 
       <tr> 
 
       <td> 
 
        {player} 
 
       </td> 
 
       </tr> 
 
      ) 
 
      }) 
 
     } 
 
     </tbody> 
 
    </table> 
 
); 
 
}; 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     players: ['john', 'alex', 'chris', 'dan'] 
 
    }; 
 
    } 
 

 
    render() { 
 
    const { players } = this.state; 
 
    return (
 
     <div> 
 
     <Table players={players} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

table { 
 
    border-collapse: collapse; 
 
} 
 

 
table, th, td { 
 
    border: 1px solid black; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

bearbeiten
Als Followup auf Ihre Frage aktualisiert, es hängt wirklich davon ab, wie Sie Ihre Table Komponente einrichten.

• Wenn ihr ein stateless Komponente sollten Sie die Spieler direkt ohne this.props.players zugreifen können.
• Wenn es eine class Komponente dann sollte es wie erwartet funktionieren, aber vielleicht haben Sie andere Stück Code, die dieses Verhalten verursachen können.

Sie haben nicht genug Code für uns zu wissen.