this.props scheint undefined zu sein und ich kann nicht herausfinden, warum

Question

Ich bin sehr neu zu Reagieren js und ich versuche, etwas sehr einfaches zu tun, wenn ein Benutzer in den Text eingibt den Text in der Das p-Tag oben sollte sich ändern, während der Benutzer tippt. Hier ist der relevante Code:

index.js

import { render } from 'react-dom' 
import App from './components/App' 

var Name = React.createClass({ 
getInitialState: function() { 
    return {name: ''} 
}, 
changeName: function(event) { 
    this.setState({ 
     name: event.target.value 
    }); 
}, 
render: function() { 
    return (
       <div> 
        <p>Your name is: {this.state.name}</p> 
        <App setName={this.changeName} /> 
       </div> 
      ) 
    } 
}); 

render((<Name />), document.getElementById('content')); 

App.js Import Stil von‘../style/base.scss';

export default function() { 
    return (
       <div> 
        <input type="text" placeholder="Enter text!" className="fancy" onChange={this.props.setName} /> 
       </div> 
    ); 
} 

Ich dachte, das würde funktionieren, aber stattdessen wird nichts auf der Seite gerendert. Wenn ich die Konsole im Browser überprüfe, sagt es mir: "Uncaught TypeError: Kann die Eigenschaft 'Requisiten' von undefined nicht lesen". Das muss bedeuten, dass das "dieses" Objekt nicht definiert ist, aber ich kann mir keinen Grund dafür vorstellen. Ich habe die ES6-Klassensyntax nicht verwendet, daher dachte ich, dass "das" gut funktionieren würde. Kann mir jemand sagen, was los ist? Vielen Dank im Voraus für jeden, der sich das ansehen möchte.

Answer 1

Sie verwenden App.js als zustandslose Funktionskomponente. Sie haben nicht this. Stattdessen werden die Requisiten als Objektparameter an Ihre Funktion übergeben. Man könnte dieses Problem beheben, indem Sie entweder ein Objekt (wie props) in Ihrer Funktion zu akzeptieren und props.setName zugreifen oder man könnte es mit Destrukturierung herausziehen und Ihre Funktion wie folgt definieren: export default function({ setName }) { und dann Referenzierung setName statt this.props.setName