反応で未定義のプロパティ "names"を読み取ることができません

Question

私はreactjs（coffescript + JSX構文）を書いています。ユーザーが入力に何かを入力してボタンをクリックすると、ajaxリクエストが送信され、コールバック関数（jsonオブジェクト）の結果がsetstateを使用しての名前に挿入されず、次のエラーが発生します。プロパティを読み取れません問題あるべき場所未定義

の "名前は" 私は知りません

$ -> 
# first component 
MainComponent = React.createClass 
    getInitialState: -> 
    names:[] 

    _getSpecificCard: (card_name) -> 
    $.get "home/users/#{card_name}", (newuser) -> @setState names:@state.names.concat([newuser])            

    _getAllcards: -> 
    @state.names.map((user) -> 
    <Card key={user.id} name={user.login} avatarurl={user.avatar_url} />) 

    render: -> 
    cards= @_getAllcards 
    <div> 
    <SimpleForm addCard={@_getSpecificCard} /> 
    {cards} 
    </div> 

# second component 
SimpleForm= React.createClass 

    _handleSubmit: (e) -> 
    e.preventDefault() 
    textInput= @refs.login 
    @props.addCard(textInput.value) 

    render: -> 
    <form onSubmit={@_handleSubmit}> 
    <input placeholder="github login" ref="login" /> 
    <button>Show user</button> 
    </form> 

# third component 
Card = React.createClass 
    render: -> 
    <div> 
    <h3>{@props.name}</h3> 
    <img src={@props.avatarurl} width=80 /> 
    </div> 

ReactDOM.render(<MainComponent />,document.getElementById("pluralsight")) 

//コンパイルされたバージョン

$(function() { 
    var Card, MainComponent, SimpleForm; 
    MainComponent = React.createClass({displayName: "MainComponent", 
    getInitialState: function() { 
     return { 
     names: [] 
     }; 
    }, 
    _getSpecificCard: function(card_name) { 
     return $.get("home/users/" + card_name, function(newuser) { 
     return this.setState({ 
      names: this.state.names.concat([newuser]) 
     }); 
     }); 
    }, 
    _getAllcards: function() { 
     return this.state.names.map(function(user) { 
     return React.createElement(Card, { 
      "key": user.id, 
      "name": user.login, 
      "avatarurl": user.avatar_url 
     }); 
     }); 
    }, 
    render: function() { 
     var cards; 
     cards = this._getAllcards; 
     return React.createElement("div", null, React.createElement(SimpleForm, { 
     "addCard": this._getSpecificCard 
     }), cards); 
    } 
    }); 
    SimpleForm = React.createClass({displayName: "SimpleForm", 
    _handleSubmit: function(e) { 
     var textInput; 
     e.preventDefault(); 
     textInput = this.refs.login; 
     return this.props.addCard(textInput.value); 
    }, 
    render: function() { 
     return React.createElement("form", { 
     "onSubmit": this._handleSubmit 
     }, React.createElement("input", { 
     "placeholder": "github login", 
     "ref": "login" 
     }), React.createElement("button", null, "Show user")); 
    } 
    }); 
    Card = React.createClass({displayName: "Card", 
    render: function() { 
     return React.createElement("div", null, React.createElement("h3", null, this.props.name), React.createElement("img", { 
     "src": this.props.avatarurl, 
     "width": 80 
     })); 
    } 
    }); 
    return ReactDOM.render(React.createElement(MainComponent, null), document.getElementById("pluralsight")); 
}); 

Answer 1

thisがコールバックのコンポーネントクラスを参照するようにするには、=>：

$.get "home/users/#{card_name}", (newuser) => @setState names:@state.names.concat([newuser]) 
             ^

それ以外の場合は、コールバックの実行時に範囲外です。

Answer 2

あなたの$.getコールバックにリアクションコンポーネントがありません（this（または@）コンテキスト）。あなたは@を維持するために脂肪の矢印=>を使用することができます。

_getSpecificCard: (card_name) -> 
    $.get "home/users/#{card_name}", (newuser) => self.setState names:self.state.names.concat([newuser]) 

また、あなたは正しいthisを確保するために、子コンポーネントに渡したときに機能をバインドする必要があります。

<SimpleForm addCard={@_getSpecificCard.bind(@)} />